<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Array 下有多少原型方法 | 烟浮YanFu</title>
    <meta name="description" content="烟浮YanFu的成长之路，包含前端常用知识、源码阅读笔记、各种奇淫技巧、日常提效工具等">
    <link rel="preload stylesheet" href="/yanfu_notes/assets/style.e0cf71e9.css" as="style">
    <script type="module" src="/yanfu_notes/assets/app.71ca72fc.js"></script>
    <link rel="preload" href="/yanfu_notes/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/yanfu_notes/assets/chunks/framework.7af2bcd9.js">
  <link rel="modulepreload" href="/yanfu_notes/assets/chunks/theme.d5b8bac9.js">
  <link rel="modulepreload" href="/yanfu_notes/assets/dailyNotes_01_learn02.md.8e1f9322.lean.js">
  <meta name="theme-color" content="#3eaf7c">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="msapplication-TileColor" content="#000000">
  <meta name="baidu-site-verification" content="codeva-Whjnr38WFE">
  <meta name="msapplication-TileImage" content="/yanfu_notes/favicon.ico">
  <link rel="icon" href="/yanfu_notes/favicon.ico">
  <link rel="apple-touch-icon" href="/yanfu_notes/favicon.ico">
  <link rel="mask-icon" href="/yanfu_notes/favicon.ico" color="#3eaf7c">
  <link rel="manifest" href="/yanfu_notes/manifest.webmanifest">
  <script src="https://hm.baidu.com/hm.js?88ce1fd281010e3790b59a4e145bd8fc"></script>
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-b2cf3e0b><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c8616af1></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c8616af1> Skip to content </a><!--]--><!----><header class="VPNav" data-v-b2cf3e0b data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-7c10cd25><div class="container" data-v-7c10cd25><div class="title" data-v-7c10cd25><div class="VPNavBarTitle has-sidebar" data-v-7c10cd25 data-v-4d981103><a class="title" href="/yanfu_notes/" data-v-4d981103><!--[--><!--]--><!--[--><img class="VPImage logo" src="/yanfu_notes/images/avatar.jpeg" alt data-v-6db2186b><!--]--><!--[-->烟浮YanFu<!--]--><!--[--><!--[--><!--[--><!--[--><img class="visitor" src="https://img.shields.io/static/v1?label=Version&amp;message=1.0.1&amp;color=00b079" onerror="this.style.display=&#39;none&#39;" data-v-9722d197><!--]--><!--]--><!--]--><!--]--></a></div></div><div class="content" data-v-7c10cd25><div class="curtain" data-v-7c10cd25></div><div class="content-body" data-v-7c10cd25><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-7c10cd25><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-7c10cd25 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/yanfu_notes/nav" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->导航<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-764effdf><span class="text" data-v-764effdf><!----> 学习笔记 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-764effdf><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><!----><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/web/JavaScript/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->JavaScript 基础<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/web/JavaScript_top/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->JavaScript 高级<!--]--><!----></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><!----><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/web/vue2/01/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->Vue2<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/web/vue3/01/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->Vue3<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/pinia/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->pinia<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/web/Nuxt3/01/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->Nuxt3<!--]--><!----></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><!----><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/web/react/01/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->React<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/web/Next/01/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->Next<!--]--><!----></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><!----><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/web/NodeLearn/01/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->Node<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/web/Dockers/01/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->Docker<!--]--><!----></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><!----><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/web/wechatCloud/01/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->微信小程序<!--]--><!----></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup active" data-v-7f418b0f data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-764effdf><span class="text" data-v-764effdf><!----> 日常笔记 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-764effdf><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><p class="title" data-v-69e747b5>JavaScript 相关</p><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/dailyNotes/01/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->优雅的 JavaScript 单行代码<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link active" href="/yanfu_notes/dailyNotes/01/learn02" data-v-2f2cfafc data-v-8f4dc553><!--[-->Array 下有多少原型方法<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/dailyNotes/01/learn03" data-v-2f2cfafc data-v-8f4dc553><!--[-->正则相关<!--]--><!----></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><p class="title" data-v-69e747b5>Vue 相关</p><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/dailyNotes/02/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->使用 defer 优化白屏时间<!--]--><!----></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><p class="title" data-v-69e747b5>css 相关</p><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/dailyNotes/03/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->loading<!--]--><!----></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/yanfu_notes/web/vue3/06/learn01" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->源码学习<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-764effdf><span class="text" data-v-764effdf><!----> Workflow <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-764effdf><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><p class="title" data-v-69e747b5>常用工具/方法</p><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/workflow/utils/library" data-v-2f2cfafc data-v-8f4dc553><!--[-->工具库整理<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/workflow/utils/regexp" data-v-2f2cfafc data-v-8f4dc553><!--[-->常用正则整理<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/workflow/utils/function" data-v-2f2cfafc data-v-8f4dc553><!--[-->常用方法整理<!--]--><!----></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><p class="title" data-v-69e747b5>CSS 相关</p><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/workflow/css/spec" data-v-2f2cfafc data-v-8f4dc553><!--[-->CSS 语法<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/workflow/css/tricks" data-v-2f2cfafc data-v-8f4dc553><!--[-->CSS 奇淫技巧<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/workflow/sass/" data-v-2f2cfafc data-v-8f4dc553><!--[-->Sass 常用技巧<!--]--><!----></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><p class="title" data-v-69e747b5>element-ui 相关</p><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/workflow/elementUI/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->切换主题<!--]--><!----></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/workflow/vue/" data-v-2f2cfafc data-v-8f4dc553><!--[-->Vue 小技巧<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/workflow/vite/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->Vite 相关<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/workflow/node/npm" data-v-2f2cfafc data-v-8f4dc553><!--[-->node 相关<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><p class="title" data-v-69e747b5>终端相关</p><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/workflow/terminal/zsh" data-v-2f2cfafc data-v-8f4dc553><!--[-->Zsh 配置<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/workflow/terminal/toolkit" data-v-2f2cfafc data-v-8f4dc553><!--[-->命令行工具<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/workflow/terminal/shell" data-v-2f2cfafc data-v-8f4dc553><!--[-->Shell 命令<!--]--><!----></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/workflow/git/learn01" data-v-2f2cfafc data-v-8f4dc553><!--[-->Git 相关<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/yanfu_notes/pit/npm" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->踩坑记录<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-764effdf><span class="text" data-v-764effdf><!----> 提效工具 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-764effdf><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><p class="title" data-v-69e747b5>软件推荐与配置</p><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/efficiency/software/cross-platform" data-v-2f2cfafc data-v-8f4dc553><!--[-->多平台软件<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/efficiency/software/mac" data-v-2f2cfafc data-v-8f4dc553><!--[-->Mac 平台<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/efficiency/software/windows" data-v-2f2cfafc data-v-8f4dc553><!--[-->Windows 平台<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/efficiency/software/browser" data-v-2f2cfafc data-v-8f4dc553><!--[-->浏览器设置与扩展<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/efficiency/software/vscode" data-v-2f2cfafc data-v-8f4dc553><!--[-->Visual Studio Code 配置<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/efficiency/software/webstorm" data-v-2f2cfafc data-v-8f4dc553><!--[-->WebStorm 配置<!--]--><!----></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/efficiency/online-tools" data-v-2f2cfafc data-v-8f4dc553><!--[-->在线工具<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-2f2cfafc><a class="VPLink link" href="/yanfu_notes/efficiency/bookmark-scripts" data-v-2f2cfafc data-v-8f4dc553><!--[-->书签脚本<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://gitee.com/addminsjh" target="_blank" rel="noreferrer" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->烟浮YanFu<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-8f4dc553><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-7c10cd25 data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-87de0873 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-87de0873><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-87de0873><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-7c10cd25 data-v-0394ad82 data-v-d7a53887><!--[--><a class="VPSocialLink" href="https://gitee.com/addminsjh" aria-label="github" target="_blank" rel="noopener" data-v-d7a53887 data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-7c10cd25 data-v-40855f84 data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-764effdf><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-764effdf><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>外观</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-87de0873 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-87de0873><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-87de0873><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-d7a53887><!--[--><a class="VPSocialLink" href="https://gitee.com/addminsjh" aria-label="github" target="_blank" rel="noopener" data-v-d7a53887 data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-7c10cd25 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-b2cf3e0b data-v-392e1bf8><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-392e1bf8><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-392e1bf8><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-392e1bf8>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-392e1bf8 data-v-079b16a8><button data-v-079b16a8>返回顶部</button><!----></div></div><aside class="VPSidebar" data-v-b2cf3e0b data-v-af16598e><div class="curtain" data-v-af16598e></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-af16598e><span class="visually-hidden" id="sidebar-aria-label" data-v-af16598e> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 has-active" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>日常笔记</h2><!----></div><div class="items" data-v-c4656e6d><!--[--><section class="VPSidebarItem level-1 collapsible has-active" data-v-c4656e6d data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h3 class="text" data-v-c4656e6d>JavaScript 相关</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-2 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/yanfu_notes/dailyNotes/01/learn01" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>10+个 JavaScript 单行代码</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link is-active has-active" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/yanfu_notes/dailyNotes/01/learn02" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Array 下有多少原型方法</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/yanfu_notes/dailyNotes/01/learn03" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>正则相关</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible collapsed" data-v-c4656e6d data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h3 class="text" data-v-c4656e6d>Vue 相关</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-2 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/yanfu_notes/dailyNotes/02/learn01" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>使用 defer 优化白屏时间</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-b2cf3e0b data-v-a494bd1d><div class="VPDoc has-sidebar has-aside" data-v-a494bd1d data-v-c4b0d3cf><!--[--><!--]--><div class="container" data-v-c4b0d3cf><div class="aside" data-v-c4b0d3cf><div class="aside-curtain" data-v-c4b0d3cf></div><div class="aside-container" data-v-c4b0d3cf><div class="aside-content" data-v-c4b0d3cf><div class="VPDocAside" data-v-c4b0d3cf data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>本页目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-9a431c33><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--[--><!--[--><!--[--><div class="VPDocAsideSponsors"><div class="VPSponsors vp-sponsor aside"><!--[--><section class="vp-sponsor-section"><!----><div class="VPSponsorsGrid vp-sponsor-grid medium"><!--[--><div class="vp-sponsor-grid-item"><a class="vp-sponsor-grid-link" target="_blank" rel="sponsored noopener"><article class="vp-sponsor-grid-box"><h4 class="visually-hidden"></h4><img class="vp-sponsor-grid-image" src="https://addminsjh.gitee.io/yanfu_notes/1.png"></article></a></div><!--]--></div></section><section class="vp-sponsor-section"><!----><div class="VPSponsorsGrid vp-sponsor-grid medium"><!--[--><div class="vp-sponsor-grid-item"><a class="vp-sponsor-grid-link" target="_blank" rel="sponsored noopener"><article class="vp-sponsor-grid-box"><h4 class="visually-hidden"></h4><img class="vp-sponsor-grid-image" src="https://addminsjh.gitee.io/yanfu_notes/1.png"></article></a></div><!--]--></div></section><!--]--></div></div><!--]--><!--]--><!--]--><!--]--></div></div></div></div><div class="content" data-v-c4b0d3cf><div class="content-container" data-v-c4b0d3cf><!--[--><!--]--><!----><main class="main" data-v-c4b0d3cf><div style="position:relative;" class="vp-doc _yanfu_notes_dailyNotes_01_learn02" data-v-c4b0d3cf><div><h1 id="array-下有多少原型方法" tabindex="-1">Array 下有多少原型方法 <a class="header-anchor" href="#array-下有多少原型方法" aria-label="Permalink to &quot;Array 下有多少原型方法&quot;">​</a></h1><p>JavaScript 中的数组是一种重要的数据结构，它提供了许多有用的方法和功能。在本文中，我们将浅浅的探讨数组的常用方法和特性，并结合唐诗、宋词和元曲等文学作品，通过案例演示这些方法的使用。让我们一起来了解 JavaScript 数组的精髓！</p><p>这次我们对着浏览器中的数组方法一个个展开来讲</p><p><img src="/yanfu_notes/assets/1.9a14583e.webp" alt="image.png"></p><h2 id="_1-array-prototype-at" tabindex="-1">1. Array.prototype.at() <a class="header-anchor" href="#_1-array-prototype-at" aria-label="Permalink to &quot;1. Array.prototype.at()&quot;">​</a></h2><h3 id="基本语法" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">at</span><span style="color:#A6ACCD;">(index)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>at()</code> 方法返回指定索引处的元素值。索引可以是负数，表示从数组的末尾开始计数。如果索引超出数组的范围，则返回 <code>undefined</code>。</p><p>使用场景示例：</p><ol><li>访问数组中的特定元素：通过指定索引来获取数组中特定位置的元素。</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">明月几时有</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">把酒问青天</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">不知天上宫阙</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">今夕是何年</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">at</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 输出: &quot;不知天上宫阙&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">at</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 输出: &quot;今夕是何年&quot;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="2"><li>连缀调用: 可以与其他数组方法进行连缀调用</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">床前明月光</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">疑是地上霜</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">举头望明月</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">低头思故乡</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> result </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> array</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">map</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">item</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> item</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">substring</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toUpperCase</span><span style="color:#A6ACCD;">() </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> item</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">substring</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">))</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">at</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(result)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 输出：&#39;疑是地上霜&#39;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="注意事项" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>当索引超出数组范围时，<code>at()</code> 方法返回 <code>undefined</code>，而不会抛出错误。</li><li><code>Array.prototype.at()</code> 方法是在较新 2022 的 JavaScript 版本中引入的，如果你使用的是旧版本的 JavaScript，可能不支持该方法。</li></ul><h3 id="总结" tabindex="-1">总结 <a class="header-anchor" href="#总结" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>at()</code> 方法可用于获取数组中指定索引处的元素值，支持负数索引。当需要访问特定位置的数组元素时，可以使用该方法。如果索引超出数组范围，将返回 <code>undefined</code>。</p><h2 id="_2-array-prototype-concat" tabindex="-1">2. Array.prototype.concat() <a class="header-anchor" href="#_2-array-prototype-concat" aria-label="Permalink to &quot;2. Array.prototype.concat()&quot;">​</a></h2><h3 id="基本语法-1" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-1" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#A6ACCD;">(value1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> value2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...,</span><span style="color:#A6ACCD;"> valueN)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-1" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-1" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>concat()</code> 方法可用于将多个数组或值合并为一个新数组。它接受一个或多个参数，可以是数组或值，并返回一个包含原始数组和要合并的数组或值的新数组。这对于将多个数组的元素组合在一起非常方便。</p><p>使用场景示例：</p><ol><li>合并多个数组：将多个数组合并为一个新数组。</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array2 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array3 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">床前明月光</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">疑是地上霜</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> newArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> array1</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#A6ACCD;">(array2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> array3)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(newArray)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: [&quot;白日依山尽&quot;, &quot;黄河入海流&quot;, &quot;欲穷千里目&quot;, &quot;更上一层楼&quot;, &quot;床前明月光&quot;, &quot;疑是地上霜&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ol><li>合并数组和值：将数组和值合并为一个新数组。</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">床前明月光</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> value </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">疑是地上霜</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> newArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> array1</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#A6ACCD;">(value)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(newArray)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: [&quot;静夜思&quot;, &quot;床前明月光&quot;, &quot;疑是地上霜&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="注意事项-1" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-1" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>concat()</code> 方法不会修改原始数组，而是返回一个新的合并后的数组。</li><li>如果参数是数组，则 <code>concat()</code> 方法会将数组展开，将数组中的每个元素添加到新数组中。</li><li>如果参数是值而不是数组，该值将直接添加到新数组的末尾。</li></ul><h3 id="总结-1" tabindex="-1">总结 <a class="header-anchor" href="#总结-1" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>concat()</code> 方法可用于将多个数组或值合并为一个新数组。它不会修改原始数组，而是返回一个新的合并后的数组。可以通过将多个数组作为参数传递给 <code>concat()</code> 方法，或将数组和值作为参数传递来合并它们。</p><h2 id="_3-array-prototype-constructor" tabindex="-1">3. Array.prototype.constructor() <a class="header-anchor" href="#_3-array-prototype-constructor" aria-label="Permalink to &quot;3. Array.prototype.constructor()&quot;">​</a></h2><h3 id="基本语法-2" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-2" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">constructor</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-2" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-2" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>constructor</code> 属性返回创建指定数组实例的函数。在 JavaScript 中，<code>Array</code> 构造函数用于创建数组对象。通过访问数组的 <code>constructor</code> 属性，可以获取创建该数组的构造函数。</p><p>使用场景示例：</p><ol><li>检查数组的构造函数：通过 <code>constructor</code> 属性来检查数组对象的构造函数。</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">床前明月光</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">疑是地上霜</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(array</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">constructor </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> Array)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 输出: true</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(array</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">constructor </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> Object)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 输出: false</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>需要注意的是，使用 <code>constructor</code> 属性来判断对象类型并不是最可靠的方法。因为在某些情况下，它可能会受到对象原型链上的修改或重写的影响。更推荐的方式是使用 <code>Array.isArray()</code> 方法进行类型检查，它能够准确地判断一个值是否为数组。</p><h3 id="注意事项-2" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-2" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>constructor</code> 属性是只读的，不能对其进行赋值。</li><li>在继承的情况下，<code>constructor</code> 属性可能会指向继承链中的其他构造函数。</li></ul><h3 id="总结-2" tabindex="-1">总结 <a class="header-anchor" href="#总结-2" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>constructor</code> 属性用于返回创建指定数组实例的构造函数。通过检查数组的 <code>constructor</code> 属性，可以确定数组对象的构造函数是否为 <code>Array</code>。这在需要验证对象是否为数组时非常有用。</p><h2 id="_4-array-prototype-copywithin" tabindex="-1">4. Array.prototype.copyWithin() <a class="header-anchor" href="#_4-array-prototype-copywithin" aria-label="Permalink to &quot;4. Array.prototype.copyWithin()&quot;">​</a></h2><h3 id="基本语法-3" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-3" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">copyWithin</span><span style="color:#A6ACCD;">(target</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> start</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> end)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-3" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-3" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>copyWithin()</code> 方法在数组内部对指定位置的元素进行拷贝，并将其放置到数组的指定位置上。它接受三个参数：</p><ul><li><code>target</code>（必需）：拷贝的目标位置，即将被拷贝的元素将从此位置开始替换。</li><li><code>start</code>（可选）：拷贝的起始位置，默认为 0。如果为负数，则表示倒数的索引。</li><li><code>end</code>（可选）：拷贝的结束位置，默认为数组长度。如果为负数，则表示倒数的索引。</li></ul><p>使用场景示例：</p><ol><li>拷贝数组元素：将数组内部的元素拷贝到指定位置。</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">明月几时有</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">把酒问青天</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">不知天上宫阙</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">今夕是何年</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 将索引为 0 的元素拷贝到索引为 2 的位置</span></span>
<span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">copyWithin</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(array)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: [&quot;明月几时有&quot;, &quot;把酒问青天&quot;, &quot;明月几时有&quot;, &quot;今夕是何年&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>在上述示例中，索引为 0 的元素 &quot;明月几时有&quot; 被拷贝到索引为 2 的位置，原来索引为 2 的元素 &quot;不知天上宫阙&quot; 被覆盖。</p><h3 id="注意事项-3" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-3" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>copyWithin()</code> 方法会修改原始数组，并返回修改后的数组。</li><li>如果 <code>target</code> 大于等于 <code>start</code>，则拷贝的元素会覆盖后面的元素。</li><li>如果 <code>end</code> 参数被省略或超过数组长度，则拷贝到末尾。</li></ul><h3 id="总结-3" tabindex="-1">总结 <a class="header-anchor" href="#总结-3" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>copyWithin()</code> 方法可用于在数组内部对指定位置的元素进行拷贝，并将其放置到数组的指定位置上。通过指定目标位置、起始位置和结束位置，可以灵活地进行元素的拷贝和替换。注意该方法会修改原始数组。</p><h2 id="_5-array-prototype-entries" tabindex="-1">5. Array.prototype.entries() <a class="header-anchor" href="#_5-array-prototype-entries" aria-label="Permalink to &quot;5. Array.prototype.entries()&quot;">​</a></h2><h3 id="基本语法-4" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-4" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">entries</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-4" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-4" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>entries()</code> 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引处的键值对。</p><p>使用场景示例：</p><ol><li>遍历数组键值对：使用 <code>entries()</code> 方法遍历数组中的键值对。</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> iterator </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">entries</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">index</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> value</span><span style="color:#89DDFF;">]</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> iterator) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">索引: </span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">index</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">, 值: </span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">}`</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出:</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 索引: 0, 值: 白日依山尽</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 索引: 1, 值: 黄河入海流</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 索引: 2, 值: 欲穷千里目</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 索引: 3, 值: 更上一层楼</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>在上述示例中，使用 <code>entries()</code> 方法获取数组的迭代器对象，然后使用 <code>for...of</code> 循环遍历迭代器对象，每次迭代得到索引和对应的值。</p><h3 id="注意事项-4" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-4" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>entries()</code> 方法返回一个迭代器对象，需要使用迭代器来访问键值对。</li><li>迭代器对象的键值对使用数组 <code>[index, value]</code> 的形式表示。</li><li>迭代器对象会遍历数组中所有索引，包括稀疏索引和被删除的索引。</li></ul><h3 id="总结-4" tabindex="-1">总结 <a class="header-anchor" href="#总结-4" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>entries()</code> 方法可用于遍历数组中每个索引处的键值对。通过获取数组的迭代器对象，并使用迭代器进行遍历，可以获取每个索引和对应的值。注意需要使用迭代器对象来访问键值对。</p><h2 id="_6-array-prototype-every" tabindex="-1">6. Array.prototype.every() <a class="header-anchor" href="#_6-array-prototype-every" aria-label="Permalink to &quot;6. Array.prototype.every()&quot;">​</a></h2><h3 id="基本语法-5" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-5" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">every</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">callback</span><span style="color:#A6ACCD;">(element</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> index</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> array)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> thisArg)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-5" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-5" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>every()</code> 方法用于检测数组中的所有元素是否满足指定的条件（通过回调函数判断）。它会对数组中的每个元素执行回调函数，并返回一个布尔值表示是否所有元素都满足条件。</p><p>使用场景示例：</p><ol><li>检查数组中的所有元素是否大于 0：使用 <code>every()</code> 方法检查数组中的所有元素是否都大于 0。</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> allContainsMoon </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">every</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">element</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> element</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">月</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(allContainsMoon)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 输出: false</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>在上述示例中，回调函数 <code>(element) =&gt; element.includes(&quot;月&quot;)</code> 用于检查每个元素是否包含&quot;月&quot;这个字。<code>every()</code> 方法会对数组中的每个元素应用该回调函数，并返回 <code>false</code>，表示并非所有元素都包含&quot;月&quot;这个字。</p><h3 id="注意事项-5" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-5" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>every()</code> 方法对数组中的每个元素执行回调函数，直到找到一个不满足条件的元素。在这种情况下，它会立即返回 <code>false</code>，不再继续遍历剩余的元素。</li><li>回调函数接受三个参数：<code>element</code>（当前正在处理的元素）、<code>index</code>（当前元素的索引）和 <code>array</code>（调用 <code>every()</code> 方法的数组）。</li><li>可选的 <code>thisArg</code> 参数可用于在回调函数中设置 <code>this</code> 的值。</li></ul><h3 id="总结-5" tabindex="-1">总结 <a class="header-anchor" href="#总结-5" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>every()</code> 方法用于检测数组中的所有元素是否满足指定的条件。它会对数组中的每个元素应用回调函数，直到找到一个不满足条件的元素或遍历完所有元素。根据检查结果，它返回一个布尔值表示是否所有元素都满足条件。</p><h2 id="_7-array-prototype-fill" tabindex="-1">7. Array.prototype.fill() <a class="header-anchor" href="#_7-array-prototype-fill" aria-label="Permalink to &quot;7. Array.prototype.fill()&quot;">​</a></h2><h3 id="基本语法-6" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-6" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">fill</span><span style="color:#A6ACCD;">(value</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> start</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> end)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-6" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-6" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>fill()</code> 方法用指定的值填充数组中从起始位置到结束位置的所有元素。它接受三个参数：</p><ul><li><code>value</code>（必需）：要填充的值。</li><li><code>start</code>（可选）：填充起始位置的索引，默认为 0。如果为负数，则表示倒数的索引。</li><li><code>end</code>（可选）：填充结束位置的索引，默认为数组的长度。如果为负数，则表示倒数的索引。</li></ul><p>使用场景示例：</p><ol><li>填充数组：将数组中的元素全部替换为指定的“明月几时有”。</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">花自飘零水自流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">一种相思两处闲愁</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">此情无计可消除</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">才下眉头却上心头</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">fill</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">明月几时有</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(array)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: [&quot;花自飘零水自流&quot;, &quot;明月几时有&quot;, &quot;明月几时有&quot;, &quot;才下眉头却上心头&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>在上述示例中，使用 <code>fill()</code> 方法将数组索引 1 到 3（不包括索引 3）的元素全部替换为&quot;明月几时有&quot;。</p><h3 id="注意事项-6" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-6" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>fill()</code> 方法会修改原始数组，并返回修改后的数组。</li><li>如果 <code>start</code> 大于等于 <code>end</code>，则不会进行填充。</li><li>如果 <code>end</code> 参数被省略或超过数组长度，则填充到末尾。</li></ul><h3 id="总结-6" tabindex="-1">总结 <a class="header-anchor" href="#总结-6" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>fill()</code> 方法用指定的值填充数组中从起始位置到结束位置的所有元素。通过指定要填充的值、起始位置和结束位置，可以对数组进行填充操作。注意该方法会修改原始数组。</p><h2 id="_8-array-prototype-filter" tabindex="-1">8. Array.prototype.filter() <a class="header-anchor" href="#_8-array-prototype-filter" aria-label="Permalink to &quot;8. Array.prototype.filter()&quot;">​</a></h2><h3 id="基本语法-7" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-7" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">filter</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">callback</span><span style="color:#A6ACCD;">(element</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> index</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> array)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> thisArg)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-7" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-7" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>filter()</code> 方法通过指定的回调函数对数组进行筛选，并返回一个新的数组，其中包含满足条件的元素。回调函数将应用于数组中的每个元素，根据返回的布尔值决定是否保留该元素。</p><p>使用场景示例：</p><ol><li>筛选包含特定词的“明月”：</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> array </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">明月几时有</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">把酒问青天</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">不知天上宫阙</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">今夕是何年</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> filteredArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">filter</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">element</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> element</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">明月</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(filteredArray)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: [&quot;明月几时有&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>在上述示例中，使用 <code>filter()</code> 方法筛选出数组中包含字词 &quot;明月&quot;</p><h3 id="注意事项-7" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-7" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>回调函数接受三个参数：<code>element</code>（当前处理的元素）、<code>index</code>（当前元素的索引）和 <code>array</code>（调用 <code>filter()</code> 方法的数组）。</li><li>可选的 <code>thisArg</code> 参数可用于在回调函数中设置 <code>this</code> 的值。</li></ul><h3 id="总结-7" tabindex="-1">总结 <a class="header-anchor" href="#总结-7" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>filter()</code> 方法通过指定的回调函数对数组进行筛选，返回一个新的数组，其中包含满足条件的元素。根据回调函数的返回值（布尔值），决定是否保留每个元素。使用 <code>filter()</code> 方法可以对数组进行灵活的筛选操作。</p><h2 id="_9-array-prototype-find" tabindex="-1">9. Array.prototype.find() <a class="header-anchor" href="#_9-array-prototype-find" aria-label="Permalink to &quot;9. Array.prototype.find()&quot;">​</a></h2><h3 id="基本语法-8" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-8" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">find</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">callback</span><span style="color:#A6ACCD;">(element</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> index</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> array)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> thisArg)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-8" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-8" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>find()</code> 方法用于在数组中查找满足指定条件的第一个元素，并返回该元素。它接受一个回调函数作为参数，该函数将被应用于数组的每个元素，直到找到满足条件的元素为止。</p><p>使用场景示例：</p><ol><li>查找包含特定关键词的唐诗：</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">春眠不觉晓，处处闻啼鸟</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽，黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">千山鸟飞绝，万径人踪灭</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">夕阳无限好，只是近黄昏</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽，黄河入海流1111</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> foundPoem </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">find</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">poem</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> poem</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(foundPoem)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//白日依山尽，黄河入海流</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>在上述示例中，使用 <code>find()</code> 方法查找包含关键词 &quot;黄河&quot; 的唐诗，并返回第一个满足条件的唐诗。</p><h3 id="注意事项-8" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-8" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>回调函数接受三个参数：<code>element</code>（当前处理的元素）、<code>index</code>（当前元素的索引）和 <code>array</code>（调用 <code>find()</code> 方法的数组）。</li><li>可选的 <code>thisArg</code> 参数可用于在回调函数中设置 <code>this</code> 的值。</li></ul><h3 id="总结-8" tabindex="-1">总结 <a class="header-anchor" href="#总结-8" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>find()</code> 方法用于在数组中查找满足指定条件的第一个元素，并返回该元素。通过提供一个回调函数，可以对数组中的每个元素进行判断，直到找到满足条件的元素为止。使用 <code>find()</code> 方法可以快速查找数组中的特定元素。</p><h2 id="_10-array-prototype-findindex" tabindex="-1">10 Array.prototype.findIndex() <a class="header-anchor" href="#_10-array-prototype-findindex" aria-label="Permalink to &quot;10 Array.prototype.findIndex()&quot;">​</a></h2><h3 id="基本语法-9" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-9" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">findIndex</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">callback</span><span style="color:#A6ACCD;">(element</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> index</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> array)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> thisArg)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-9" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-9" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>findIndex()</code> 方法用于在数组中查找满足指定条件的第一个元素的索引，并返回该索引值。它接受一个回调函数作为参数，该函数将被应用于数组的每个元素，直到找到满足条件的元素为止。</p><p>使用场景示例：</p><ol><li>查找包含特定关键词的唐诗的索引：</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽，黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">春眠不觉晓，处处闻啼鸟</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">千山鸟飞绝，万径人踪灭</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">夕阳无限好，只是近黄昏</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> foundIndex </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">findIndex</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">poem</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> poem</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(foundIndex)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: 0</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>在上述示例中，使用 <code>findIndex()</code> 方法查找包含关键词 &quot;黄河&quot; 的唐诗的索引，并返回第一个满足条件的唐诗的索引值。</p><h3 id="注意事项-9" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-9" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>回调函数接受三个参数：<code>element</code>（当前处理的元素）、<code>index</code>（当前元素的索引）和 <code>array</code>（调用 <code>findIndex()</code> 方法的数组）。</li><li>可选的 <code>thisArg</code> 参数可用于在回调函数中设置 <code>this</code> 的值。</li></ul><h3 id="总结-9" tabindex="-1">总结 <a class="header-anchor" href="#总结-9" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>findIndex()</code> 方法用于在数组中查找满足指定条件的第一个元素的索引，并返回该索引值。通过提供一个回调函数，可以对数组中的每个元素进行判断，直到找到满足条件的元素为止。使用 <code>findIndex()</code> 方法可以快速查找数组中满足条件的元素的索引。</p><h2 id="_11-array-prototype-findlast" tabindex="-1">11. Array.prototype.findLast() <a class="header-anchor" href="#_11-array-prototype-findlast" aria-label="Permalink to &quot;11. Array.prototype.findLast()&quot;">​</a></h2><h3 id="基本语法-10" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-10" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">findLast</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">callback</span><span style="color:#A6ACCD;">(element</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> index</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> array)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> thisArg)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-10" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-10" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>findLast()</code> 方法用于在数组中从后向前查找满足指定条件的最后一个元素，并返回该元素。它接受一个回调函数作为参数，该函数将被应用于数组的每个元素，从最后一个元素开始逐个判断，直到找到满足条件的元素为止。</p><p>使用场景示例：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">明月几时有，把酒问青天</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽，黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">人生自古谁无死，留取丹心照汗青</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">此情可待成追忆，只是当时已惘然</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">千山鸟飞绝，万径人踪灭</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> foundLastPoem </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">findLast</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">poem</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> poem</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(foundLastPoem)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: &quot;白日依山尽，黄河入海流&quot;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>在上述示例中，我们使用 <code>findLast()</code> 方法从后向前查找包含关键词 &quot;黄河&quot; 的唐诗，并返回最后一个满足条件的元素。</p><h3 id="注意事项-10" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-10" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>回调函数接受三个参数：<code>element</code>（当前处理的元素）、<code>index</code>（当前元素的索引）和 <code>array</code>（调用 <code>findLast()</code> 方法的数组）。</li><li>可选的 <code>thisArg</code> 参数可用于在回调函数中设置 <code>this</code> 的值。</li></ul><h3 id="总结-10" tabindex="-1">总结 <a class="header-anchor" href="#总结-10" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>Array.prototype.findLast()</code> 方法用于在数组中从后向前查找满足指定条件的最后一个元素，并返回该元素。通过提供一个回调函数，可以对数组中的每个元素进行判断，从最后一个元素开始逐个判断，直到找到满足条件的元素为止。使用 <code>findLast()</code> 方法可以快速查找数组中最后一个满足条件的元素。</p><h2 id="_12-array-prototype-findlastindex" tabindex="-1">12. Array.prototype.findLastIndex() <a class="header-anchor" href="#_12-array-prototype-findlastindex" aria-label="Permalink to &quot;12. Array.prototype.findLastIndex()&quot;">​</a></h2><h3 id="基本语法-11" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-11" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">findLastIndex</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">callback</span><span style="color:#A6ACCD;">(element</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> index</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> array)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> thisArg)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-11" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-11" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>findLastIndex()</code> 方法用于在数组中从后向前查找满足指定条件的最后一个元素的索引，并返回该索引值。它接受一个回调函数作为参数，该函数将被应用于数组的每个元素，从最后一个元素开始逐个判断，直到找到满足条件的元素为止。</p><p>使用场景示例：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">明月几时有，把酒问青天</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽，黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">人生自古谁无死，留取丹心照汗青</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">此情可待成追忆，只是当时已惘然</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">千山鸟飞绝，万径人踪灭</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> lastIndex </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">findLastIndex</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">poem</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> poem</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(lastIndex)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: 1</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>在上述示例中，我们使用 <code>findLastIndex()</code> 方法从后向前查找包含关键词 &quot;黄河&quot; 的唐诗，并返回最后一个满足条件的元素的索引值。</p><h3 id="注意事项-11" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-11" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>回调函数接受三个参数：<code>element</code>（当前处理的元素）、<code>index</code>（当前元素的索引）和 <code>array</code>（调用 <code>findLastIndex()</code> 方法的数组）。</li><li>可选的 <code>thisArg</code> 参数可用于在回调函数中设置 <code>this</code> 的值。</li></ul><h3 id="总结-11" tabindex="-1">总结 <a class="header-anchor" href="#总结-11" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>Array.prototype.findLastIndex()</code> 方法用于在数组中从后向前查找满足指定条件的最后一个元素的索引，并返回该索引值。通过提供一个回调函数，可以对数组中的每个元素进行判断，从最后一个元素开始逐个判断，直到找到满足条件的元素为止。使用 <code>findLastIndex()</code> 方法可以快速查找数组中最后一个满足条件的元素的索引。</p><h2 id="_13-array-prototype-flat" tabindex="-1">13. Array.prototype.flat() <a class="header-anchor" href="#_13-array-prototype-flat" aria-label="Permalink to &quot;13. Array.prototype.flat()&quot;">​</a></h2><h3 id="基本语法-12" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-12" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">flat</span><span style="color:#A6ACCD;">(depth)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-12" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-12" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>flat()</code> 方法用于将嵌套多层的数组扁平化为一个新的数组。它接受一个可选的 <code>depth</code> 参数，表示要扁平化的层级深度。如果没有提供 <code>depth</code> 参数，则默认为 1。</p><p>使用场景示例：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽，黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">人生自古谁无死，留取丹心照汗青</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">此情可待成追忆，只是当时已惘然</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">千山鸟飞绝，万径人踪灭</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> nestedPoems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">明月几时有，把酒问青天</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> poems</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">床前明月光，疑是地上霜</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> flattenedArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> nestedPoems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">flat</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(flattenedArray)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: [&quot;明月几时有，把酒问青天&quot;, &quot;白日依山尽，黄河入海流&quot;, &quot;人生自古谁无死，留取丹心照汗青&quot;, &quot;此情可待成追忆，只是当时已惘然&quot;, &quot;千山鸟飞绝，万径人踪灭&quot;, &quot;床前明月光，疑是地上霜&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>在上述示例中，我们使用 <code>flat()</code> 方法将嵌套多层的数组 <code>nestedPoems</code> 扁平化为一个新的数组 <code>flattenedArray</code>。通过将 <code>depth</code> 参数设置为默认值 1，数组 <code>poems</code> 中的元素被展开到了最外层的结果数组中。</p><p>如果需要扁平化多层嵌套的数组，可以传递一个大于 1 的 <code>depth</code> 参数：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> deeplyNestedPoems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">明月几时有，把酒问青天</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  [poems</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">床前明月光，疑是地上霜</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽，黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> deeplyFlattenedArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> deeplyNestedPoems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">flat</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(deeplyFlattenedArray)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: [&quot;明月几时有，把酒问青天&quot;, &quot;白日依山尽，黄河入海流&quot;, &quot;人生自古谁无死，留取丹心照汗青&quot;, &quot;此情可待成追忆，只是当时已惘然&quot;, &quot;千山鸟飞绝，万径人踪灭&quot;, &quot;床前明月光，疑是地上霜&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>在上述示例中，我们通过将 <code>depth</code> 参数设置为 2，将多层嵌套的数组 <code>deeplyNestedPoems</code> 扁平化为一个新的数组 <code>deeplyFlattenedArray</code>。数组 <code>poems</code> 中的元素以及嵌套在数组中的元素都被展开到了最外层的结果数组中。</p><h3 id="注意事项-12" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-12" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>flat()</code> 方法返回一个新数组，原始数组不会被修改。</li><li>如果数组中的元素有空位（<code>undefined</code>），它们会被跳过并在结果中被忽略。</li><li>如果需要完全扁平化一个数组，可以使用 <code>Infinity</code> 作为 <code>depth</code> 参数的值。</li></ul><h3 id="总结-12" tabindex="-1">总结 <a class="header-anchor" href="#总结-12" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>Array.prototype.flat()</code> 方法用于将嵌套多层的数组扁平化为一个新的数组。通过提供一个可选的 <code>depth</code> 参数，可以指定要扁平化的层级深度。使用 <code>flat()</code> 方法可以快速处理嵌套数组，并得到一个扁平化的结果。</p><h2 id="_14-array-prototype-flatmap" tabindex="-1">14. Array.prototype.flatMap() <a class="header-anchor" href="#_14-array-prototype-flatmap" aria-label="Permalink to &quot;14. Array.prototype.flatMap()&quot;">​</a></h2><p><code>flatMap()</code> 方法是数组的一个方法，它结合了 <code>map()</code> 和 <code>flat()</code> 的功能。它对数组的每个元素应用一个映射函数，并将结果扁平化为一个新数组。</p><h3 id="基本语法-13" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-13" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> newArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">flatMap</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">callback</span><span style="color:#A6ACCD;">(element</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> index</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> array)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> thisArg)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li><p><code>array</code>: 原始数组。</p></li><li><p>callback: 用于映射每个元素的回调函数。</p><ul><li><code>element</code>: 当前元素的值。</li><li><code>index</code> (可选): 当前元素的索引。</li><li><code>array</code> (可选): 调用 <code>flatMap()</code> 方法的数组。</li></ul></li><li><p><code>thisArg</code> (可选): 执行回调函数时使用的 <code>this</code> 值。</p></li></ul><h3 id="使用场景-13" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-13" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>flatMap()</code> 方法适用于以下场景：</p><ol><li>对数组中的每个元素应用一个转换函数，得到一个新的值或数组。</li><li>将转换函数的结果扁平化为一个新数组。</li></ol><p>假设我们有一个包含多个诗人的数组 <code>poets</code>，每个诗人都有多首诗歌。我们想要获取所有诗人的所有诗歌的标题，并将它们放置在一个新数组中。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poets </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">李白</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">poems</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">将进酒</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">望庐山瀑布</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">] </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">杜甫</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">poems</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">月夜忆舍弟</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登高</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">秋夜将晓出篱门迎凉有感</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">] </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">苏轼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">poems</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">江城子·密州出猎</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">赤壁赋</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">水调歌头·明月几时有</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">] </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poemTitles </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> poets</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">flatMap</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">poet</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> poet</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">poems)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(poemTitles)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>在上述示例中，我们使用 <code>flatMap()</code> 方法对 <code>poets</code> 数组中的每个诗人对象应用一个映射函数 <code>poet =&gt; poet.poems</code>。这个映射函数返回每个诗人的诗歌数组。然后，<code>flatMap()</code> 方法将这些诗歌数组扁平化为一个新数组 <code>poemTitles</code>，其中包含了所有诗人的所有诗歌的标题。</p><p>输出结果如下所示：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">[</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">将进酒</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">望庐山瀑布</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">月夜忆舍弟</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登高</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">秋夜将晓出篱门迎凉有感</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">江城子·密州出猎</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">赤壁赋</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">水调歌头·明月几时有</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>通过使用 <code>flatMap()</code> 方法，我们可以轻松地对数组中的每个元素应用转换函数，并将结果扁平化为一个新数组。</p><h3 id="注意事项-13" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-13" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>flatMap()</code> 方法会自动去除结果数组中的 <code>null</code> 和 <code>undefined</code> 值。</li></ul><h3 id="总结-13" tabindex="-1">总结 <a class="header-anchor" href="#总结-13" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>flatMap()</code> 方法是一个功能强大的数组方法，它可以同时应用映射函数和扁平化操作，提供了一种简洁、高效的方式来处理具有嵌套结构的数组。通过合并 <code>map()</code> 和 <code>flat()</code> 的功能，<code>flatMap()</code> 提供了更简洁的代码编写方式，并能够在一次操作中实现多个数组的处理和合并。</p><h2 id="_15-array-prototype-foreach" tabindex="-1">15. Array.prototype.forEach() <a class="header-anchor" href="#_15-array-prototype-foreach" aria-label="Permalink to &quot;15. Array.prototype.forEach()&quot;">​</a></h2><p><code>forEach()</code> 方法是数组的一个方法，用于对数组的每个元素执行提供的回调函数。</p><h3 id="基本语法-14" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-14" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">callback</span><span style="color:#A6ACCD;">(currentValue</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> index</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> array)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> thisArg)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li><p><code>array</code>: 要遍历的数组。</p></li><li><p>callback : 对数组中的每个元素执行的回调函数。</p><ul><li><code>currentValue</code>: 当前元素的值。</li><li><code>index</code> (可选): 当前元素的索引。</li><li><code>array</code> (可选): 调用 <code>forEach()</code> 方法的数组。</li></ul></li><li><p><code>thisArg</code> (可选): 执行回调函数时使用的 <code>this</code> 值。</p></li></ul><h3 id="使用场景-14" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-14" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>forEach()</code> 方法适用于以下场景：</p><ol><li>遍历数组并对每个元素执行某些操作，如打印元素、修改元素值等。</li><li>无需返回值，仅需要遍历数组的情况。</li></ol><p>假设我们有一个存储唐诗的数组 <code>poems</code>，我们想要打印每首诗的作者和内容。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">author</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">李白</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">床前明月光，疑是地上霜。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登鹳雀楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">author</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">王之涣</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽，黄河入海流。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">卜算子·咏梅</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">author</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">陆游</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">风雨送春归，飞雪迎春到。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">poem</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">《</span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">poem</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">title</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">》 - 作者：</span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">poem</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">author</span><span style="color:#89DDFF;">}`</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">内容：</span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">poem</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">content</span><span style="color:#89DDFF;">}`</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>在上述示例中，我们使用 <code>forEach()</code> 方法遍历 <code>poems</code> 数组，并对每首诗执行回调函数。回调函数打印诗的标题、作者和内容。</p><h3 id="注意事项-14" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-14" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>forEach()</code> 方法无法在遍历过程中中止或跳出循环，它会对数组的每个元素都执行回调函数。</li><li>如果需要在遍历过程中中止或跳出循环，可以使用 <code>for</code> 循环或 <code>Array.prototype.some()</code> 方法。</li></ul><h3 id="总结-14" tabindex="-1">总结 <a class="header-anchor" href="#总结-14" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>forEach()</code> 方法是一个简单且常用的数组方法，用于遍历数组并对每个元素执行回调函数。它提供了一种简洁的方式来处理数组的每个元素，并且不需要返回值。在处理数组元素时，可以根据具体需求在回调函数中进行相应的操作。</p><h2 id="_16-array-prototype-includes" tabindex="-1">16. Array.prototype.includes() <a class="header-anchor" href="#_16-array-prototype-includes" aria-label="Permalink to &quot;16. Array.prototype.includes()&quot;">​</a></h2><p><code>includes()</code> 方法是数组的一个方法，用于判断数组是否包含指定的元素，并返回相应的布尔值。</p><h3 id="基本语法-15" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-15" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(searchElement</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> fromIndex)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li><code>array</code>: 要进行查找的数组。</li><li><code>searchElement</code>: 要查找的元素。</li><li><code>fromIndex</code> (可选): 开始查找的索引位置，默认为 0。</li></ul><h3 id="使用场景-15" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-15" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>includes()</code> 方法适用于以下场景：</p><ol><li>判断数组中是否包含某个特定的元素。</li><li>检查数组是否包含指定的值，并根据结果进行相应的逻辑处理。</li></ol><p>假设我们有一个存储唐诗标题的数组 <code>titles</code>，我们想要判断是否包含某个特定的标题。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> titles </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登鹳雀楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">卜算子·咏梅</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(titles</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: true</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(titles</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">月下独酌</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: false</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>在上述示例中，我们使用 <code>includes()</code> 方法判断 <code>titles</code> 数组是否包含指定的标题。第一个 <code>console.log()</code> 输出为 <code>true</code>，表示 <code>titles</code> 数组包含 <code>&#39;静夜思&#39;</code> 这个标题。第二个 <code>console.log()</code> 输出为 <code>false</code>，表示 <code>titles</code> 数组不包含 <code>&#39;月下独酌&#39;</code> 这个标题。</p><h3 id="注意事项-15" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-15" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>includes()</code> 方法使用严格相等运算符（<code>===</code>）进行比较。</li><li>如果 <code>fromIndex</code> 参数为负数，则从末尾开始计算索引。</li><li><code>includes()</code> 方法返回的是布尔值 <code>true</code> 或 <code>false</code>。</li></ul><h3 id="总结-15" tabindex="-1">总结 <a class="header-anchor" href="#总结-15" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>includes()</code> 方法是一个简单而实用的数组方法，用于判断数组是否包含指定的元素。通过返回布尔值，我们可以根据结果进行相应的逻辑处理。它提供了一种简洁的方式来检查数组中的值，避免了手动遍历数组的麻烦。</p><h2 id="_17-array-prototype-indexof" tabindex="-1">17. Array.prototype.indexOf() <a class="header-anchor" href="#_17-array-prototype-indexof" aria-label="Permalink to &quot;17. Array.prototype.indexOf()&quot;">​</a></h2><p><code>indexOf()</code> 方法是数组的一个方法，用于查找指定元素在数组中首次出现的索引位置。</p><h3 id="基本语法-16" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-16" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">indexOf</span><span style="color:#A6ACCD;">(searchElement</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> fromIndex)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li><code>array</code>: 要进行查找的数组。</li><li><code>searchElement</code>: 要查找的元素。</li><li><code>fromIndex</code> (可选): 开始查找的索引位置，默认为 0。</li></ul><h3 id="使用场景-16" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-16" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>indexOf()</code> 方法适用于以下场景：</p><ol><li>查找指定元素在数组中的位置。</li><li>判断数组中是否包含某个特定的元素。</li><li>根据元素的索引进行后续的操作，如删除、替换等。</li></ol><p>假设我们有一个存储唐诗标题的数组 <code>titles</code>，我们想要查找某个特定的标题在数组中的索引位置。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> titles </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登鹳雀楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">卜算子·咏梅</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(titles</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">indexOf</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登鹳雀楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: 1</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(titles</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">indexOf</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">月下独酌</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: -1</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>在上述示例中，我们使用 <code>indexOf()</code> 方法查找 <code>&#39;登鹳雀楼&#39;</code> 在 <code>titles</code> 数组中的索引位置。第一个 <code>console.log()</code> 输出为 <code>1</code>，表示 <code>&#39;登鹳雀楼&#39;</code> 在数组中的索引位置为 1。第二个 <code>console.log()</code> 输出为 <code>-1</code>，表示 <code>&#39;月下独酌&#39;</code> 不在数组中，返回 -1。</p><h3 id="注意事项-16" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-16" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>indexOf()</code> 方法使用严格相等运算符（<code>===</code>）进行比较。</li><li>如果 <code>fromIndex</code> 参数为负数，则从末尾开始计算索引。</li><li>如果 <code>searchElement</code> 在数组中多次出现，<code>indexOf()</code> 方法仅返回首次出现的索引位置。</li></ul><h3 id="总结-16" tabindex="-1">总结 <a class="header-anchor" href="#总结-16" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>indexOf()</code> 方法是一个常用的数组方法，用于查找指定元素在数组中首次出现的索引位置。它提供了一种便捷的方式来判断数组中是否包含某个特定的元素，并获取其位置。通过返回索引位置，我们可以根据需求进行后续的操作。</p><h2 id="_18-array-prototype-join" tabindex="-1">18. Array.prototype.join() <a class="header-anchor" href="#_18-array-prototype-join" aria-label="Permalink to &quot;18. Array.prototype.join()&quot;">​</a></h2><p><code>join()</code> 方法是数组的一个方法，用于将数组中的所有元素连接成一个字符串。</p><h3 id="基本语法-17" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-17" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">join</span><span style="color:#A6ACCD;">(separator)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li><code>array</code>: 要进行连接的数组。</li><li><code>separator</code> (可选): 指定连接元素的分隔符，默认为逗号 <code>,</code>。</li></ul><h3 id="使用场景-17" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-17" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>join()</code> 方法适用于以下场景：</p><ol><li>将数组中的元素连接成一个字符串。</li><li>自定义分隔符来连接数组元素。</li></ol><p>假设我们有一个存储唐诗作者的数组 <code>authors</code>，我们想要将数组中的元素用逗号分隔连接成一个字符串。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> authors </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">李白</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">王之涣</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">陆游</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> joinedString </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> authors</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">join</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">, </span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(joinedString)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: &#39;李白, 王之涣, 陆游&#39;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>在上述示例中，我们使用 <code>join()</code> 方法将 <code>authors</code> 数组中的元素用逗号和空格分隔连接成一个字符串。<code>joinedString</code> 的值为 <code>&#39;李白, 王之涣, 陆游&#39;</code>。</p><h3 id="注意事项-17" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-17" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>如果数组中的元素是对象或其他复杂类型，会先调用它们的 <code>toString()</code> 方法将其转换为字符串，然后再进行连接。</li><li>如果数组中的元素为 <code>undefined</code> 或 <code>null</code>，它们会被转换为空字符串。</li><li>如果数组为空，则返回空字符串。</li></ul><h3 id="总结-17" tabindex="-1">总结 <a class="header-anchor" href="#总结-17" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>join()</code> 方法是一个方便的数组方法，用于将数组中的元素连接成一个字符串。它可以根据指定的分隔符进行连接，并且可以灵活地适应不同的连接需求。通过使用 <code>join()</code> 方法，我们可以快速将数组转换为字符串，并进行后续的处理。</p><h2 id="_19-array-prototype-keys" tabindex="-1">19. Array.prototype.keys() <a class="header-anchor" href="#_19-array-prototype-keys" aria-label="Permalink to &quot;19. Array.prototype.keys()&quot;">​</a></h2><p><code>keys()</code> 方法是数组的一个方法，用于返回一个包含数组索引的迭代器。</p><h3 id="基本语法-18" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-18" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">earray</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">keys</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li><code>array</code>: 要返回索引迭代器的数组。</li></ul><h3 id="使用场景-18" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-18" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>keys()</code> 方法适用于以下场景：</p><ol><li>遍历数组的索引。</li><li>获取数组索引进行后续的操作。</li></ol><p>假设我们有一个存储唐诗标题的数组 <code>titles</code>，我们想要遍历数组的索引并打印出来。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> titles </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登鹳雀楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">卜算子·咏梅</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> iterator </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> titles</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">keys</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> index </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> iterator) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">index</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: 0</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: 1</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: 2</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>在上述示例中，我们使用 <code>keys()</code> 方法获取 <code>titles</code> 数组的索引迭代器，并通过 <code>for...of</code> 循环遍历迭代器获取索引值。在循环体内，我们打印出每个索引值，即 0、1、2。</p><h3 id="注意事项-18" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-18" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>keys()</code> 方法返回一个迭代器，可以通过 <code>for...of</code> 循环来遍历索引值。</li><li>迭代器按照数组的索引顺序返回索引值。</li><li>如果数组元素被删除或更改，迭代器仍会返回原始的索引值。</li></ul><h3 id="总结-18" tabindex="-1">总结 <a class="header-anchor" href="#总结-18" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>keys()</code> 方法是一个便捷的数组方法，用于返回一个包含数组索引的迭代器。通过遍历迭代器，我们可以获取数组的索引值，并根据需求进行后续的操作。它为数组的索引遍历提供了一种简单且可靠的方式。</p><h2 id="_20-array-prototype-lastindexof" tabindex="-1">20. Array.prototype.lastIndexOf() <a class="header-anchor" href="#_20-array-prototype-lastindexof" aria-label="Permalink to &quot;20. Array.prototype.lastIndexOf()&quot;">​</a></h2><p><code>lastIndexOf()</code> 方法是数组的一个方法，用于查找指定元素在数组中最后一次出现的索引位置。</p><h3 id="基本语法-19" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-19" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">lastIndexOf</span><span style="color:#A6ACCD;">(searchElement</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> fromIndex)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li><code>array</code>: 要进行查找的数组。</li><li><code>searchElement</code>: 要查找的元素。</li><li><code>fromIndex</code> (可选): 开始查找的索引位置，默认为数组末尾。</li></ul><h3 id="使用场景-19" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-19" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>lastIndexOf()</code> 方法适用于以下场景：</p><ol><li>查找指定元素在数组中最后一次出现的位置。</li><li>判断数组中是否包含某个特定的元素。</li><li>根据元素的索引进行后续的操作，如删除、替换等。</li></ol><p>假设我们有一个存储唐诗标题的数组 <code>titles</code>，我们想要查找某个特定的标题在数组中最后一次出现的索引位置。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> titles </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登鹳雀楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">卜算子·咏梅</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登鹳雀楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(titles</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">lastIndexOf</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登鹳雀楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: 3</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(titles</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">lastIndexOf</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: 0</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(titles</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">lastIndexOf</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">月下独酌</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: -1</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>在上述示例中，我们使用 <code>lastIndexOf()</code> 方法查找 <code>&#39;登鹳雀楼&#39;</code> 在 <code>titles</code> 数组中最后一次出现的索引位置。第一个 <code>console.log()</code> 输出为 <code>3</code>，表示 <code>&#39;登鹳雀楼&#39;</code> 在数组中最后一次出现的索引位置为 3。第二个 <code>console.log()</code> 输出为 <code>0</code>，表示 <code>&#39;静夜思&#39;</code> 在数组中最后一次出现的索引位置为 0。第三个 <code>console.log()</code> 输出为 <code>-1</code>，表示 <code>&#39;月下独酌&#39;</code> 不在数组中，返回 -1。</p><h3 id="注意事项-19" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-19" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>lastIndexOf()</code> 方法使用严格相等运算符（<code>===</code>）进行比较。</li><li>如果 <code>fromIndex</code> 参数为负数，则从末尾开始计算索引。</li><li>如果 <code>searchElement</code> 在数组中多次出现，<code>lastIndexOf()</code> 方法仅返回最后一次出现的索引位置。</li></ul><h3 id="总结-19" tabindex="-1">总结 <a class="header-anchor" href="#总结-19" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>lastIndexOf()</code> 方法是一个常用的数组方法，用于查找指定元素在数组中最后一次出现的索引位置。它提供了一种便捷的方式来判断数组中是否包含某个特定的元素，并获取其最后出现的位置。通过返回索引位置，我们可以根据需求进行后续的操作。</p><h2 id="_21-array-prototype-map" tabindex="-1">21. Array.prototype.map() <a class="header-anchor" href="#_21-array-prototype-map" aria-label="Permalink to &quot;21. Array.prototype.map()&quot;">​</a></h2><p><code>map()</code> 方法是数组的一个方法，用于创建一个新数组，其结果是对原数组中的每个元素应用指定的函数后的返回值。</p><h3 id="基本语法-20" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-20" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">map</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">callback</span><span style="color:#A6ACCD;">(element</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> index</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> array))</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li><p><code>array</code>: 要进行映射的数组。</p></li><li><p>callback: 用于处理每个元素的回调函数，可以接受三个参数：</p><ul><li><code>element</code>: 当前正在处理的元素。</li><li><code>index</code> (可选): 当前元素的索引。</li><li><code>array</code> (可选): 调用 <code>map()</code> 方法的原数组。</li></ul></li></ul><h3 id="使用场景-20" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-20" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>map()</code> 方法适用于以下场景：</p><ol><li>对数组中的每个元素进行转换或处理，生成一个新的数组。</li><li>将数组中的元素映射为另一种类型的值。</li></ol><p>我们使用 <code>map()</code> 方法将存储唐诗的数组中的每首诗的标题提取出来：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">id</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">author</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">李白</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">id</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登鹳雀楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">author</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">王之涣</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">id</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">卜算子·咏梅</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">author</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">陆游</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">id</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">长恨歌</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">author</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白居易</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> titles </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">map</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">poem</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> poem</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">title)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(titles)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: [&#39;静夜思&#39;, &#39;登鹳雀楼&#39;, &#39;卜算子·咏梅&#39;, &#39;长恨歌&#39;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>在上述示例中，我们有一个存储唐诗对象的数组 <code>poems</code>。通过使用 <code>map()</code> 方法，我们遍历数组中的每个对象，并通过箭头函数将每个对象的 <code>title</code> 属性提取出来。<code>titles</code> 是一个新的数组，其中包含了每首唐诗的标题。</p><p>这个案例展示了 <code>map()</code> 方法的另一个常见用法，即从对象数组中提取特定属性形成新的数组。通过灵活运用 <code>map()</code> 方法，我们可以方便地对存储对象的数组进行数据提取和转换操作。</p><h3 id="注意事项-20" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-20" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>map()</code> 方法会创建一个新的数组，原始数组不会被修改。</li><li><code>map()</code> 方法会按照原始数组的顺序依次处理每个元素，并将处理结果放入新数组的相应位置。</li><li>如果原始数组中有空位（未定义的元素），则新数组中对应位置也是空位。</li><li>如果只是想遍历数组而不生成新的数组，可以考虑使用 <code>forEach()</code> 方法。</li></ul><h3 id="总结-20" tabindex="-1">总结 <a class="header-anchor" href="#总结-20" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>map()</code> 方法用于创建一个新数组，其中每个元素是通过应用指定函数后的返回值。它允许我们对数组中的每个元素进行处理或转换，并生成一个具有相同长度的新数组。通过使用 <code>map()</code> 方法，我们可以轻松地对数组中的元素进行映射操作，满足不同的转换需求。</p><h2 id="_22-array-prototype-pop" tabindex="-1">22. Array.prototype.pop() <a class="header-anchor" href="#_22-array-prototype-pop" aria-label="Permalink to &quot;22. Array.prototype.pop()&quot;">​</a></h2><p><code>pop()</code> 方法用于从数组中删除并返回最后一个元素。</p><h3 id="基本语法-21" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-21" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">pop</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li><code>array</code>: 要操作的数组。</li></ul><h3 id="使用场景-21" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-21" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>pop()</code> 方法适用于以下场景：</p><ol><li>从数组中删除最后一个元素。</li><li>获取数组中的最后一个元素，并在删除后使用。</li></ol><p>假设我们有一个存储唐诗的数组 <code>poems</code>，我们想要删除数组中的最后一首诗。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登鹳雀楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">卜算子·咏梅</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">长恨歌</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> lastPoem </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">pop</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(lastPoem)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: &#39;长恨歌&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(poems)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: [&#39;静夜思&#39;, &#39;登鹳雀楼&#39;, &#39;卜算子·咏梅&#39;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>在上述示例中，我们使用 <code>pop()</code> 方法从 <code>poems</code> 数组中删除了最后一首诗，并将其返回给变量 <code>lastPoem</code>。<code>lastPoem</code> 包含了被删除的最后一首诗的值。同时，<code>poems</code> 数组也被修改，最后一首诗被从数组中删除。</p><h3 id="注意事项-21" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-21" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>pop()</code> 方法会修改原始数组，从数组中删除最后一个元素。</li><li>如果数组为空，则 <code>pop()</code> 方法返回 <code>undefined</code>。</li><li>可以将 <code>pop()</code> 方法与变量结合使用，以获取并处理最后一个元素。</li></ul><h3 id="总结-21" tabindex="-1">总结 <a class="header-anchor" href="#总结-21" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>pop()</code> 方法是一个常用的数组方法，用于从数组中删除并返回最后一个元素。它提供了一种简便的方式来操作数组的末尾元素。通过了解 <code>pop()</code> 方法的使用场景和注意事项，我们可以更好地利用它在处理数组时的实际需求。</p><h2 id="_23-array-prototype-push" tabindex="-1">23. Array.prototype.push() <a class="header-anchor" href="#_23-array-prototype-push" aria-label="Permalink to &quot;23. Array.prototype.push()&quot;">​</a></h2><p><code>push()</code> 方法用于向数组末尾添加一个或多个元素，并返回修改后的数组的新长度。</p><h3 id="基本语法-22" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-22" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#A6ACCD;">(element1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> element2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...,</span><span style="color:#A6ACCD;"> elementN)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li><code>array</code>: 要操作的数组。</li><li><code>element1, element2, ..., elementN</code>: 要添加到数组末尾的元素。</li></ul><h3 id="使用场景-22" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-22" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>push()</code> 方法适用于以下场景：</p><ol><li>向数组末尾添加一个元素。</li><li>向数组末尾连续添加多个元素。</li></ol><p>假设我们有一个存储唐诗的数组 <code>poems</code>，我们想要向数组末尾添加一首新的诗。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登鹳雀楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">卜算子·咏梅</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">春夜喜雨</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(poems)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出: [&#39;静夜思&#39;, &#39;登鹳雀楼&#39;, &#39;卜算子·咏梅&#39;, &#39;春夜喜雨&#39;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>在上述示例中，我们使用 <code>push()</code> 方法向 <code>poems</code> 数组末尾添加了一首新的诗 <code>&#39;春夜喜雨&#39;</code>。<code>push()</code> 方法会将新元素添加到数组的末尾，并返回修改后的数组的新长度。</p><h3 id="注意事项-22" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-22" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>push()</code> 方法会修改原始数组，向其末尾添加新元素。</li><li><code>push()</code> 方法返回的是修改后的数组的新长度，而不是新数组本身。</li><li>可以通过连续调用 <code>push()</code> 方法来向数组末尾添加多个元素。</li></ul><h3 id="总结-22" tabindex="-1">总结 <a class="header-anchor" href="#总结-22" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>push()</code> 方法是一个常用的数组方法，用于向数组末尾添加一个或多个元素。它提供了一种简便的方式来修改数组，实现动态添加元素的需求。通过了解 <code>push()</code> 方法的使用场景和注意事项，我们可以更好地利用它在处理数组时的实际需求。</p><h2 id="_24-array-prototype-reduce" tabindex="-1">24. Array.prototype.reduce() <a class="header-anchor" href="#_24-array-prototype-reduce" aria-label="Permalink to &quot;24. Array.prototype.reduce()&quot;">​</a></h2><p><code>Array.prototype.reduce()</code> 方法就像是我们在人生旅途中的一个忠实伴侣，帮助我们将一系列的元素化繁为简，融合成一个有意义的结果。</p><h3 id="基本语法-23" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-23" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reduce</span><span style="color:#A6ACCD;">(callback</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> initialValue)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li><p><code>array</code>：需要进行处理的数组。</p></li><li><p><code>callback</code>：回调函数，用于对数组中的每个元素进行操作。</p><ul><li>回调函数接收四个参数：累积值（accumulator）、当前值（currentValue）、当前索引（currentIndex）、原始数组（array）。</li></ul></li><li><p><code>initialValue</code>（可选）：初始值，作为回调函数的第一个累积值。</p></li></ul><h3 id="使用场景-23" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-23" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>Array.prototype.reduce() 方法适用于以下场景：</p><ol><li>当我们需要将数组中的元素合并为一个单一的值时，如计算总和、求平均值等。</li><li>当我们需要对数组进行聚合操作，并生成一个结果值时。</li></ol><p>让我们以一个例子来说明 Array.prototype.reduce() 的使用：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> numbers </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> sum </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> numbers</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reduce</span><span style="color:#A6ACCD;">(</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">accumulator</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">currentValue</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> accumulator </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> currentValue</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F78C6C;">0</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(sum)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：15</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>在上述示例中，我们使用 reduce() 方法将数组中的所有元素相加，并将初始值设置为 0。回调函数对每个元素进行累加操作，将当前值加到累积值上。</p><h3 id="注意事项-23" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-23" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>如果不提供初始值 <code>initialValue</code>，reduce() 方法会从索引 1 开始遍历数组，并将索引 0 的元素作为初始累积值。</li><li>回调函数会在数组的每个元素上被调用，直到处理完所有元素。</li><li>可以根据实际需求，在回调函数中进行其他操作，如过滤、转换等。</li></ul><h3 id="总结-23" tabindex="-1">总结 <a class="header-anchor" href="#总结-23" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p>Array.prototype.reduce() 方法是一个强大的工具，帮助我们在处理数组时将多个元素聚合为一个结果。通过传入回调函数和初始值，我们可以灵活地操作数组中的元素，生成我们所需的结果。</p><h2 id="_25-array-prototype-reduceright" tabindex="-1">25. Array.prototype.reduceRight() <a class="header-anchor" href="#_25-array-prototype-reduceright" aria-label="Permalink to &quot;25. Array.prototype.reduceRight()&quot;">​</a></h2><p>在唐朝的元稹的诗中有一句：“春蚕到死丝方尽，蜡炬成灰泪始干。” Array.prototype.reduceRight() 方法就像是一盏蜡烛，在我们处理数组时从右向左逐步燃烧，帮助我们将数组的元素逐个合并为一个结果。</p><h3 id="基本语法-24" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-24" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reduceRight</span><span style="color:#A6ACCD;">(callback</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> initialValue)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li><p><code>array</code>：需要进行处理的数组。</p></li><li><p><code>callback</code>：回调函数，用于对数组中的每个元素进行操作。</p><ul><li>回调函数接收四个参数：累积值（accumulator）、当前值（currentValue）、当前索引（currentIndex）、原始数组（array）。</li></ul></li><li><p><code>initialValue</code>（可选）：初始值，作为回调函数的第一个累积值。</p></li></ul><h3 id="使用场景-24" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-24" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>Array.prototype.reduceRight() 方法适用于以下场景：</p><ol><li>当我们需要从右向左将数组中的元素合并为一个单一的值时，如逆序计算总和、逆序求平均值等。</li><li>当我们需要对数组进行逆序的聚合操作，并生成一个结果值时。</li></ol><p>让我们以一个例子来说明 Array.prototype.reduceRight() 的使用：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> numbers </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> sum </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> numbers</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reduceRight</span><span style="color:#A6ACCD;">(</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">accumulator</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">currentValue</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> accumulator </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> currentValue</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F78C6C;">0</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(sum)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：15</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>在上述示例中，我们使用 reduceRight() 方法从右向左将数组中的所有元素相加，并将初始值设置为 0。回调函数对每个元素进行累加操作，将当前值加到累积值上。</p><h3 id="注意事项-24" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-24" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>如果不提供初始值 <code>initialValue</code>，reduceRight() 方法会从数组的最后一个元素开始向前遍历，并将最后一个元素作为初始累积值。</li><li>回调函数会在数组的每个元素上被调用，直到处理完所有元素。</li><li>可以根据实际需求，在回调函数中进行其他操作，如过滤、转换等。</li></ul><h3 id="总结-24" tabindex="-1">总结 <a class="header-anchor" href="#总结-24" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p>Array.prototype.reduceRight() 方法是一个有用的工具，帮助我们从右向左逐步合并数组中的多个元素，生成一个结果。通过传入回调函数和初始值，我们可以在逆序处理数组元素时进行灵活的操作。</p><h2 id="_26-array-prototype-reverse" tabindex="-1">26. Array.prototype.reverse() <a class="header-anchor" href="#_26-array-prototype-reverse" aria-label="Permalink to &quot;26. Array.prototype.reverse()&quot;">​</a></h2><p>这个方法用于将数组中的元素顺序颠倒，使最后一个元素变为第一个元素，第一个元素变为最后一个元素。</p><h3 id="基本语法-25" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-25" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reverse</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-25" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-25" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>比如，我们有一个唐诗数组，我们想将其元素倒序排列，使最后一首诗成为第一首诗，第一首诗成为最后一首诗。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登鹳雀楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">卜算子·咏梅</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">长恨歌</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reverse</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(poems)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：[&quot;长恨歌&quot;, &quot;卜算子·咏梅&quot;, &quot;登鹳雀楼&quot;, &quot;静夜思&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="注意事项-25" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-25" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>Array.prototype.reverse() 方法会直接修改原始数组，而不会创建新的数组。</li><li>它会改变数组中元素的顺序，使最后一个元素成为第一个元素，第一个元素成为最后一个元素。</li><li>reverse() 方法是原地修改，不会返回新的数组。</li></ul><h3 id="总结-25" tabindex="-1">总结 <a class="header-anchor" href="#总结-25" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p>Array.prototype.reverse() 方法是一个方便的工具，用于将数组中的元素顺序颠倒。通过简单地调用该方法，我们可以修改原始数组，使其元素逆序排列。</p><h2 id="_27-array-prototype-shift" tabindex="-1">27. Array.prototype.shift() <a class="header-anchor" href="#_27-array-prototype-shift" aria-label="Permalink to &quot;27. Array.prototype.shift()&quot;">​</a></h2><p>这个方法用于从数组中移除并返回第一个元素。</p><h3 id="基本语法-26" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-26" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">shift</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-26" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-26" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>比如，我们有一个元曲人物数组，我们想要从数组中移除并获取第一个人物。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> characters </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">关雎</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">韩翃</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">张生</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">蝶恋花</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> firstCharacter </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> characters</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">shift</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(firstCharacter)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：&quot;关雎&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(characters)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：[&quot;韩翃&quot;, &quot;张生&quot;, &quot;蝶恋花&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="注意事项-26" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-26" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>Array.prototype.shift() 方法会直接修改原始数组，而不会创建新的数组。</li><li>它会移除并返回数组的第一个元素，同时将其他元素的索引值减一。</li><li>如果数组为空，则返回 undefined。</li></ul><h3 id="总结-26" tabindex="-1">总结 <a class="header-anchor" href="#总结-26" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p>Array.prototype.shift() 方法是一个用于从数组中移除并返回第一个元素的便捷方法。通过调用该方法，我们可以修改原始数组，并获取被移除的元素。</p><h2 id="_28-array-prototype-slice" tabindex="-1">28. Array.prototype.slice() <a class="header-anchor" href="#_28-array-prototype-slice" aria-label="Permalink to &quot;28. Array.prototype.slice()&quot;">​</a></h2><p>这个方法用于从数组中提取指定范围的元素，创建一个新的数组并返回。</p><h3 id="基本语法-27" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-27" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">slice</span><span style="color:#A6ACCD;">(startIndex</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> endIndex)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-27" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-27" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>比如，我们有一个宋词数组，我们想要提取其中的前两首词组成一个新的数组。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> songs </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">浣溪沙</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">如梦令</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">渔家傲</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">青玉案</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> slicedSongs </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> songs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">slice</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(slicedSongs)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：[&quot;浣溪沙&quot;, &quot;如梦令&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="注意事项-27" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-27" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>Array.prototype.slice() 方法不会修改原始数组，而是创建一个新的数组。</li><li>startIndex 是要提取的起始位置的索引（包括该位置），endIndex 是要提取的结束位置的索引（不包括该位置）。</li><li>如果省略 endIndex，则会提取从 startIndex 到数组末尾的所有元素。</li><li>如果提取范围超出了数组的长度，slice() 方法会自动调整范围，以确保返回有效的结果。</li><li>如果 startIndex 或 endIndex 是负数，则表示从数组末尾开始计算的索引。</li></ul><h3 id="总结-27" tabindex="-1">总结 <a class="header-anchor" href="#总结-27" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p>Array.prototype.slice() 方法是一个灵活的工具，用于从数组中提取指定范围的元素，并创建一个新的数组。通过指定起始位置和结束位置，我们可以轻松地获取所需的元素子集。</p><h2 id="_29-array-prototype-some" tabindex="-1">29. Array.prototype.some() <a class="header-anchor" href="#_29-array-prototype-some" aria-label="Permalink to &quot;29. Array.prototype.some()&quot;">​</a></h2><p>这个方法用于检测数组中是否至少有一个元素满足给定的条件，如果有则返回 true，否则返回 false。</p><h3 id="基本语法-28" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-28" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">some</span><span style="color:#A6ACCD;">(callback)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-28" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-28" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>比如，我们有一个元曲人物数组，我们想要检查是否存在姬、王两个角色。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> characters </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">关雎</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">韩翃</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">张生</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">蝶恋花</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> hasJiOrWang </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> characters</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">some</span><span style="color:#A6ACCD;">(</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">character</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> character </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">姬</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">||</span><span style="color:#A6ACCD;"> character </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">王</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(hasJiOrWang)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：false</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="注意事项-28" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-28" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>Array.prototype.some() 方法会遍历数组中的每个元素，执行回调函数进行条件判断。</li><li>回调函数接受三个参数：当前元素的值、当前元素的索引、原始数组。</li><li>如果回调函数对于至少一个元素返回 true，则 some() 方法返回 true，否则返回 false。</li><li>some() 方法不会修改原始数组。</li><li>some() 方法在遇到满足条件的元素后会停止遍历，不再继续执行回调函数。</li></ul><h3 id="总结-28" tabindex="-1">总结 <a class="header-anchor" href="#总结-28" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p>Array.prototype.some() 方法是一个用于检测数组中是否至少有一个元素满足给定条件的便捷方法。通过传入回调函数并进行条件判断，我们可以快速确定数组中是否存在满足要求的元素。</p><h2 id="_30-array-prototype-sort" tabindex="-1">30. Array.prototype.sort() <a class="header-anchor" href="#_30-array-prototype-sort" aria-label="Permalink to &quot;30. Array.prototype.sort()&quot;">​</a></h2><p>sort() 方法用于对数组的元素进行排序。默认情况下，它将元素按照字符串的 Unicode 编码进行排序，即使数组中的元素是数字类型。</p><h3 id="基本语法-29" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-29" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">sort</span><span style="color:#A6ACCD;">(compareFunction)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-29" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-29" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>比如，我们有一个唐诗作者数组，我们想按照字母顺序对其进行排序。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poets </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白居易</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">杜甫</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">王之涣</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">李白</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">poets</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">sort</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(poets)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：[&quot;李白&quot;, &quot;白居易&quot;, &quot;王之涣&quot;, &quot;杜甫&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="注意事项-29" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-29" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>sort() 方法默认按照字符串的 Unicode 编码进行排序。</li><li>如果元素是数字类型，sort() 方法会将其转换为字符串后再进行比较。</li><li>如果想要按照其他规则进行排序，可以传入一个比较函数作为参数，该函数定义了排序的规则。</li><li>比较函数接受两个参数，表示要比较的两个元素。</li><li>如果比较函数返回负值，则第一个元素在排序后的数组中排在第二个元素之前；如果返回正值，则第一个元素在排序后的数组中排在第二个元素之后；如果返回 0，则两个元素的相对位置不变。</li><li>sort() 方法会修改原始数组，并返回排序后的数组。</li></ul><h3 id="总结-29" tabindex="-1">总结 <a class="header-anchor" href="#总结-29" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p>Array.prototype.sort() 方法是对数组元素进行排序的常用方法。默认情况下，它按照字符串的 Unicode 编码进行排序，但我们也可以传入自定义的比较函数来实现按照其他规则排序。通过合理地使用 sort() 方法，我们可以轻松对数组进行排序操作。</p><h2 id="_31-array-prototype-splice" tabindex="-1">31. Array.prototype.splice() <a class="header-anchor" href="#_31-array-prototype-splice" aria-label="Permalink to &quot;31. Array.prototype.splice()&quot;">​</a></h2><p>splice() 方法用于从数组中添加或删除元素，并返回被删除的元素。它可以修改原始数组。</p><h3 id="基本语法-30" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-30" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">splice</span><span style="color:#A6ACCD;">(start[</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> deleteCount[</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> item1[</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> item2[</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">]]]])</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-30" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-30" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>比如，我们有一个数组存储着唐诗的若干行，我们想在指定位置插入新的诗句，并删除一些旧的诗句。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 在索引为 2 的位置插入新的诗句</span></span>
<span class="line"><span style="color:#A6ACCD;">poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">splice</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">江山如此多娇</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 删除索引为 3 和 4 的诗句</span></span>
<span class="line"><span style="color:#A6ACCD;">poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">splice</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(poems)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：[&quot;白日依山尽&quot;, &quot;黄河入海流&quot;, &quot;江山如此多娇&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="注意事项-30" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-30" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>splice() 方法会修改原始数组，并返回一个包含被删除元素的数组。</li><li>start 参数表示要进行添加或删除操作的起始索引。</li><li>deleteCount 参数表示要删除的元素数量。如果为 0，则不删除任何元素。</li><li>可以在删除元素的同时，通过添加额外的参数来插入新的元素。</li><li>如果删除的元素数量超过数组中的元素数量，splice() 方法会删除从起始索引开始到数组末尾的所有元素。</li><li>splice() 方法会改变原始数组的长度。</li></ul><h3 id="总结-30" tabindex="-1">总结 <a class="header-anchor" href="#总结-30" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p>Array.prototype.splice() 方法是在数组中添加或删除元素的灵活工具。通过合理地使用起始索引和删除数量参数，我们可以实现在指定位置插入新元素或删除指定范围的元素。它是修改数组的重要方法之一，可以应用于各种场景。</p><h2 id="_32-array-prototype-tolocalestring" tabindex="-1">32. Array.prototype.toLocaleString() <a class="header-anchor" href="#_32-array-prototype-tolocalestring" aria-label="Permalink to &quot;32. Array.prototype.toLocaleString()&quot;">​</a></h2><p>toLocaleString() 方法返回一个字符串，表示数组中的元素根据宿主环境的语言和字符集进行格式化后的结果。</p><h3 id="基本语法-31" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-31" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toLocaleString</span><span style="color:#A6ACCD;">([locales[</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> options]])</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-31" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-31" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>toLocaleString() 方法通常用于将数组中的元素以特定的语言和字符集格式化为字符串。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> numbers </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#F78C6C;">12345.6789</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">98765.4321</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 使用默认语言环境的格式化</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> formattedString </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> numbers</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toLocaleString</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(formattedString)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出（可能因语言环境而异）：12,345.679, 98,765.432</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 指定英语美国语言环境的格式化</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> formattedStringUS </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> numbers</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toLocaleString</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">en-US</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(formattedStringUS)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：12,345.679, 98,765.432</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 指定德语德国语言环境的格式化</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> formattedStringDE </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> numbers</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toLocaleString</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">de-DE</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(formattedStringDE)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：12.345,679, 98.765,432</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="注意事项-31" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-31" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>toLocaleString() 方法会将数组中的每个元素转换为字符串，并根据语言环境的要求进行格式化。</li><li>可以通过可选的 locales 参数指定要使用的语言环境。如果未指定 locales 参数，则使用默认的语言环境。</li><li>options 参数可以用于进一步指定格式化选项，如货币符号、小数位数等。</li><li>格式化结果可能因不同的语言环境而异。</li></ul><h3 id="总结-31" tabindex="-1">总结 <a class="header-anchor" href="#总结-31" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p>Array.prototype.toLocaleString() 方法是将数组中的元素以特定的语言和字符集进行格式化的实用工具。通过指定语言环境和可选的格式化选项，我们可以获得适合特定地区或国家的格式化字符串。这对于国际化的应用程序或需要根据语言环境进行格式化的场景非常有用。</p><h2 id="_33-array-prototype-toreversed" tabindex="-1">33. Array.prototype.toReversed() <a class="header-anchor" href="#_33-array-prototype-toreversed" aria-label="Permalink to &quot;33. Array.prototype.toReversed()&quot;">​</a></h2><p>该方法是<code>Array.prototype.reverse()</code>方法的复制版本，它返回一个以相反顺序排列的新数组。</p><h3 id="基本语法-32" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-32" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toReversed</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-32" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-32" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>该方法用于将数组元素以相反的顺序进行排列，并返回一个新的数组。调用该方法不会改变原始数组。</p><ol><li>将数组中的唐诗倒序排列：<code>toReversed()</code>方法可以用于将数组中的唐诗以相反的顺序进行排列，从而实现倒序输出的效果。</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> reversedPoems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toReversed</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(reversedPoems)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// [&#39;更上一层楼&#39;, &#39;欲穷千里目&#39;, &#39;黄河入海流&#39;, &#39;白日依山尽&#39;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="注意事项-32" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-32" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>toReversed()</code>方法对于稀疏数组（包含空槽的数组）的处理方式是将空槽视为<code>undefined</code>。</li></ul><h3 id="总结-32" tabindex="-1">总结 <a class="header-anchor" href="#总结-32" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>Array.prototype.toReversed()</code>方法返回一个以相反顺序排列的新数组，可以用于实现数组倒序输出的效果。它是<code>reverse()</code>方法的复制版本，不会修改原始数组。在处理需要反转数组元素顺序的场景下非常有用。</p><h2 id="_34-array-prototype-tosorted" tabindex="-1">34. Array.prototype.toSorted() <a class="header-anchor" href="#_34-array-prototype-tosorted" aria-label="Permalink to &quot;34. Array.prototype.toSorted()&quot;">​</a></h2><p><code>Array.prototype.toSorted()</code> 方法是 <code>sort()</code> 方法的复制版本，用于对数组进行升序排序并返回一个新数组。</p><h3 id="基本语法-33" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-33" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toSorted</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-33" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-33" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>该方法用于对数组元素进行排序，以升序排列，并返回一个新的已排序数组。调用该方法不会改变原始数组。</p><ol><li>对数组进行升序排序：</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> sortedPoems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toSorted</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(sortedPoems)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// [&#39;更上一层楼&#39;, &#39;欲穷千里目&#39;, &#39;黄河入海流&#39;, &#39;白日依山尽&#39;]</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(poems)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// [&#39;白日依山尽&#39;, &#39;黄河入海流&#39;, &#39;欲穷千里目&#39;, &#39;更上一层楼&#39;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="注意事项-33" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-33" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li>当在稀疏数组上使用 <code>toSorted()</code> 方法时，空槽会被视为 <code>undefined</code> 值，并且它们会被排序到数组的末尾。</li></ul><h3 id="总结-33" tabindex="-1">总结 <a class="header-anchor" href="#总结-33" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>Array.prototype.toSorted()</code> 方法可以对数组元素进行升序排序，并返回一个新的已排序数组。它是 <code>sort()</code> 方法的复制版本，不会修改原始数组。在需要对数组进行排序的场景下非常有用。</p><h2 id="_35-array-prototype-tospliced" tabindex="-1">35. Array.prototype.toSpliced() <a class="header-anchor" href="#_35-array-prototype-tospliced" aria-label="Permalink to &quot;35. Array.prototype.toSpliced()&quot;">​</a></h2><p><code>Array.prototype.toSpliced()</code> 方法是 <code>splice()</code> 方法的复制版本，用于在数组中删除和/或替换元素，并返回一个新数组。</p><h3 id="基本语法-34" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-34" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toSpliced</span><span style="color:#A6ACCD;">(start)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toSpliced</span><span style="color:#A6ACCD;">(start</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> deleteCount)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toSpliced</span><span style="color:#A6ACCD;">(start</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> deleteCount</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> item1)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toSpliced</span><span style="color:#A6ACCD;">(start</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> deleteCount</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> item1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> item2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> itemN)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="使用场景-34" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-34" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>该方法用于在数组中删除和/或替换元素，并返回一个新数组。调用该方法不会改变原始数组。</p><ol><li>删除、添加和替换元素：</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 在索引 1 处添加一个元素</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems2 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toSpliced</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">夜静春山远</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(poems2)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// [&#39;白日依山尽&#39;, &#39;夜静春山远&#39;, &#39;黄河入海流&#39;, &#39;欲穷千里目&#39;, &#39;更上一层楼&#39;]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 从第 2 个索引开始删除两个元素</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems3 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> poems2</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toSpliced</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(poems3)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// [&#39;白日依山尽&#39;, &#39;夜静春山远&#39;, &#39;更上一层楼&#39;]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 在索引 1 处用两个新元素替换一个元素</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems4 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> poems3</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toSpliced</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">行人欲断魂</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">楼台望月春</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(poems4)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// [&#39;白日依山尽&#39;, &#39;行人欲断魂&#39;, &#39;楼台望月春&#39;, &#39;更上一层楼&#39;]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 原数组不会被修改</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(poems)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// [&#39;白日依山尽&#39;, &#39;黄河入海流&#39;, &#39;欲穷千里目&#39;, &#39;更上一层楼&#39;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="注意事项-34" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-34" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>toSpliced()</code> 方法不会产生稀疏数组。如果原始数组是稀疏的，在新数组中空槽将会被替换成 <code>undefined</code>。</li></ul><h3 id="总结-34" tabindex="-1">总结 <a class="header-anchor" href="#总结-34" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>Array.prototype.toSpliced()</code> 方法用于在数组中删除和/或替换元素，并返回一个新数组。它是 <code>splice()</code> 方法的复制版本，不会修改原始数组。在需要对数组进行删除、添加和替换操作的场景下非常有用。</p><h2 id="_36-array-prototype-tostring" tabindex="-1">36. Array.prototype.toString() <a class="header-anchor" href="#_36-array-prototype-tostring" aria-label="Permalink to &quot;36. Array.prototype.toString()&quot;">​</a></h2><p><code>Array.prototype.toString()</code> 方法将数组转换为一个由数组元素字符串化后连接而成的字符串，并返回该字符串。</p><h3 id="基本语法-35" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-35" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toString</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-35" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-35" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>该方法用于将数组转换为字符串形式，并返回该字符串。数组中的每个元素会通过调用其 <code>toString()</code> 方法进行字符串化。数组元素之间会使用逗号 <code>,</code> 进行连接。</p><ol><li>将唐诗数组转换为字符串：</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poemsString </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toString</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(poemsString)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出： &quot;白日依山尽,黄河入海流,欲穷千里目,更上一层楼&quot;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="注意事项-35" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-35" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>toString()</code> 方法会将数组中的 <code>null</code> 和 <code>undefined</code> 值转换为空字符串。</li><li>如果数组中的元素是对象，则会调用每个对象的 <code>toString()</code> 方法进行转换。</li></ul><h3 id="总结-35" tabindex="-1">总结 <a class="header-anchor" href="#总结-35" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>Array.prototype.toString()</code> 方法将数组转换为一个由数组元素字符串化后连接而成的字符串，并返回该字符串。它会使用逗号 <code>,</code> 将数组元素连接起来。在需要将数组转换为字符串的场景下非常有用。</p><h2 id="_37-array-prototype-unshift" tabindex="-1">37. Array.prototype.unshift() <a class="header-anchor" href="#_37-array-prototype-unshift" aria-label="Permalink to &quot;37. Array.prototype.unshift()&quot;">​</a></h2><p><code>Array.prototype.unshift()</code> 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。</p><h3 id="基本语法-36" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-36" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">unshift</span><span style="color:#A6ACCD;">(element1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> element2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...,</span><span style="color:#A6ACCD;"> elementN)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-36" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-36" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>该方法用于将一个或多个元素添加到数组的开头，并返回新数组的长度。原数组中的所有元素将向后移动，为新添加的元素腾出空间。</p><ol><li>在唐诗数组开头添加新的诗句：</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> newPoem </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登鹳雀楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> newLength </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">unshift</span><span style="color:#A6ACCD;">(newPoem)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(newLength)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：5</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(poems)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// [</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//   &#39;登鹳雀楼&#39;,</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//   &#39;白日依山尽&#39;,</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//   &#39;黄河入海流&#39;,</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//   &#39;欲穷千里目&#39;,</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//   &#39;更上一层楼&#39;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// ]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><ol start="2"><li>在唐诗数组开头添加多个新的诗句：</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> poems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> newPoems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">登鹳雀楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> newLength </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> poems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">unshift</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">newPoems)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(newLength)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：6</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(poems)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// [</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//   &#39;登鹳雀楼&#39;,</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//   &#39;静夜思&#39;,</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//   &#39;白日依山尽&#39;,</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//   &#39;黄河入海流&#39;,</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//   &#39;欲穷千里目&#39;,</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//   &#39;更上一层楼&#39;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// ]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="注意事项-36" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-36" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>unshift()</code> 方法会直接修改原始数组，并返回新数组的长度。</li><li><code>unshift()</code> 方法会改变数组的长度，以及所有后续元素的索引。</li><li><code>unshift()</code> 方法可以一次添加一个或多个元素到数组的开头。</li><li><code>unshift()</code> 方法的参数是按顺序添加到数组开头的，参数列表中的第一个元素将成为数组的第一个元素。</li></ul><h3 id="总结-36" tabindex="-1">总结 <a class="header-anchor" href="#总结-36" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>Array.prototype.unshift()</code> 方法用于将一个或多个元素添加到数组的开头，并返回新数组的长度。它会直接修改原始数组，并改变数组的长度和元素索引。在需要向数组开头添加元素的场景下非常有用。</p><h2 id="_38-array-prototype-values" tabindex="-1">38. Array.prototype.values() <a class="header-anchor" href="#_38-array-prototype-values" aria-label="Permalink to &quot;38. Array.prototype.values()&quot;">​</a></h2><p><code>Array.prototype.values()</code> 方法返回一个新的数组迭代器对象，该对象包含唐诗集合中的每首唐诗。</p><h3 id="基本语法-37" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-37" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">c</span></span>
<span class="line"><span style="color:#A6ACCD;">复制代码</span></span>
<span class="line"><span style="color:#A6ACCD;">array.values()</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="使用场景-37" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-37" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>该方法用于获取唐诗集合中每首唐诗，并返回一个新的数组迭代器对象。通过遍历迭代器对象，可以逐个访问唐诗集合中的唐诗。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> tangPoems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> iterator </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> tangPoems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">values</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(iterator</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">next</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 输出：白日依山尽</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(iterator</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">next</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 输出：黄河入海流</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(iterator</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">next</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 输出：欲穷千里目</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(iterator</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">next</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 输出：更上一层楼</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(iterator</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">next</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 输出：undefined</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="注意事项-37" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-37" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>Array.prototype.values()</code> 方法返回一个新的数组迭代器对象，并不直接返回唐诗集合的值。</li><li>迭代器对象可以通过调用 <code>next()</code> 方法逐个获取唐诗集合中的唐诗，直到遍历完所有唐诗或到达唐诗集合的末尾。</li><li>当迭代器对象遍历到唐诗集合末尾后，调用 <code>next()</code> 方法将返回一个对象，其 <code>value</code> 属性为 <code>undefined</code>。</li><li>迭代器对象是一种可迭代对象，可以使用 <code>for...of</code> 循环或 <code>Array.from()</code> 方法将其转换为数组。</li></ul><p>使用 <code>for...of</code> 循环遍历唐诗集合中的唐诗：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> tangPoems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poem </span><span style="color:#89DDFF;">of</span><span style="color:#A6ACCD;"> tangPoems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">values</span><span style="color:#A6ACCD;">()) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">poem</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 白日依山尽</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 黄河入海流</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 欲穷千里目</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 更上一层楼</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>使用 <code>Array.from()</code> 方法将迭代器对象转换为数组：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> tangPoems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> iterator </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> tangPoems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">values</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> poemArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">from</span><span style="color:#A6ACCD;">(iterator)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(poemArray)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：[&quot;白日依山尽&quot;, &quot;黄河入海流&quot;, &quot;欲穷千里目&quot;, &quot;更上一层楼&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="总结-37" tabindex="-1">总结 <a class="header-anchor" href="#总结-37" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>Array.prototype.values()</code> 方法返回一个新的数组迭代器对象，用于遍历唐诗集合中的每首唐诗。</p><h2 id="_39-array-prototype-with" tabindex="-1">39. Array.prototype.with() <a class="header-anchor" href="#_39-array-prototype-with" aria-label="Permalink to &quot;39. Array.prototype.with()&quot;">​</a></h2><p><code>Array.prototype.with()</code> 方法返回一个新的数组，其中包含指定元素添加到当前数组的结果。</p><h3 id="基本语法-38" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-38" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">with</span><span style="color:#A6ACCD;">(element1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> element2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...,</span><span style="color:#A6ACCD;"> elementN)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-38" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-38" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>该方法用于在当前数组的末尾添加指定的元素，并返回一个新的数组。新数组包含原始数组的所有元素以及添加的元素。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> tangPoems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> newArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> tangPoems</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">with</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">静夜思</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">床前明月光</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(newArray)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// [&quot;白日依山尽&quot;, &quot;黄河入海流&quot;, &quot;欲穷千里目&quot;, &quot;更上一层楼&quot;, &quot;静夜思&quot;, &quot;床前明月光&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="注意事项-38" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-38" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>Array.prototype.with()</code> 方法返回一个新的数组，不会修改原始数组。</li><li>可以一次添加一个或多个元素到数组末尾。</li><li>添加的元素的顺序与在方法参数中的顺序相同。</li></ul><h3 id="总结-38" tabindex="-1">总结 <a class="header-anchor" href="#总结-38" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>Array.prototype.with()</code> 方法返回一个新的数组，其中包含指定元素添加到当前数组的结果。可以用于快速向数组末尾添加一个或多个元素，而不改变原始数组。</p><h2 id="_40-array-from" tabindex="-1">40. Array.from() <a class="header-anchor" href="#_40-array-from" aria-label="Permalink to &quot;40. Array.from()&quot;">​</a></h2><p><code>Array.from()</code> 方法从一个类似数组或可迭代对象中创建一个新的数组实例。</p><h3 id="基本语法-39" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-39" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">from</span><span style="color:#A6ACCD;">(iterable</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> mapFn</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> thisArg)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-39" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-39" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p><code>Array.from()</code> 方法可用于将类似数组的对象（例如字符串、Set、Map 等）或可迭代对象（例如数组、类数组对象等）转换为数组。</p><p>以下是使用 <code>Array.from()</code> 方法将唐诗、宋词和元曲转换为数组的示例：</p><ol><li>将唐诗转换为数组：</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> tangPoems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Set</span><span style="color:#A6ACCD;">([</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">])</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> tangPoemArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">from</span><span style="color:#A6ACCD;">(tangPoems)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(tangPoemArray)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// [&quot;白日依山尽&quot;, &quot;黄河入海流&quot;, &quot;欲穷千里目&quot;, &quot;更上一层楼&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><ol start="2"><li>将宋词转换为数组：</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> songLyrics </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Map</span><span style="color:#A6ACCD;">([</span></span>
<span class="line"><span style="color:#A6ACCD;">  [</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">青青子衿，悠悠我心。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  [</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">纵我不往，子宁不嗣音？</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">])</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> songLyricArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">from</span><span style="color:#A6ACCD;">(songLyrics</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">values</span><span style="color:#A6ACCD;">())</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(songLyricArray)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// [&quot;青青子衿，悠悠我心。&quot;, &quot;纵我不往，子宁不嗣音？&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ol start="3"><li>将元曲转换为数组：</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">generateYuanQu</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">yield</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">秦淮河畔，月明人静。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">yield</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">繁华落尽，唯余伤心。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> yuanQuArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">from</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">generateYuanQu</span><span style="color:#A6ACCD;">())</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(yuanQuArray)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 输出：</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// [&quot;秦淮河畔，月明人静。&quot;, &quot;繁华落尽，唯余伤心。&quot;]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>以上示例将唐诗、宋词和元曲转换为了数组，方便进行进一步的操作和处理。</p><h3 id="注意事项-39" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-39" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>Array.from()</code> 方法返回一个新的数组实例，不会修改原始对象。</li><li>可以提供第二个参数 <code>mapFn</code>，用于在转换过程中对元素进行映射操作。</li><li>可以提供第三个参数 <code>thisArg</code>，用于在映射函数中绑定 <code>this</code> 的值。</li></ul><h3 id="总结-39" tabindex="-1">总结 <a class="header-anchor" href="#总结-39" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>Array.from()</code> 方法可用于从类似数组或可迭代对象中创建一个新的数组实例，并提供了映射函数和绑定 <code>this</code> 的选项。</p><h2 id="_41-array-isarray" tabindex="-1">41. Array.isArray() <a class="header-anchor" href="#_41-array-isarray" aria-label="Permalink to &quot;41. Array.isArray()&quot;">​</a></h2><p><code>Array.isArray()</code> 方法用于判断给定的值是否为数组。</p><h3 id="基本语法-40" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-40" aria-label="Permalink to &quot;基本语法&quot;">​</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">isArray</span><span style="color:#A6ACCD;">(value)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="使用场景-40" tabindex="-1">使用场景 <a class="header-anchor" href="#使用场景-40" aria-label="Permalink to &quot;使用场景&quot;">​</a></h3><p>该方法用于确定给定的值是否为数组。它返回一个布尔值，如果值是数组，则返回 <code>true</code>；否则返回 <code>false</code>。</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> tangPoems </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">白日依山尽</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">黄河入海流</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">欲穷千里目</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">更上一层楼</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> isTangPoemsArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">isArray</span><span style="color:#A6ACCD;">(tangPoems)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(isTangPoemsArray)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 输出：true</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> songLyrics </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">青青子衿，悠悠我心。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">但为君故，沉吟至今。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">呦呦鹿鸣，食野之蒿。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">我有嘉宾，鼓瑟吹笙。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">明明如月，何时可掇？</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">忧从中来，不可断绝。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">越陌度阡，枉用相存。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">契阔谈䜩，心念旧恩。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">月明星稀，乌鹊南飞。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">绕树三匝，何枝可依？</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">山不厌高，海不厌深。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">周公吐哺，天下归心。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> isSongLyricsArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">isArray</span><span style="color:#A6ACCD;">(songLyrics)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(isSongLyricsArray)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 输出：true</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> yuanDrama </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">明月几时有？把酒问青天。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">不知天上宫阙，今夕是何年？</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">起舞弄清影，何似在人间！</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">转朱阁，低绮户，照无眠。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">不应有恨，何事长向别时圆？</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">人有悲欢离合，月有阴晴圆缺，此事古难全。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">但愿人长久，千里共婵娟。</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> isYuanDramaArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">isArray</span><span style="color:#A6ACCD;">(yuanDrama)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(isYuanDramaArray)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 输出：true</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><p>以上代码分别创建了唐诗集合、宋词集合和元曲集合，并使用 <code>Array.isArray()</code> 方法判断它们是否为数组，最后将结果输出。根据约定的格式，输出了每个集合是否为数组的布尔值（<code>true</code> 表示是数组）。</p><h3 id="注意事项-40" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项-40" aria-label="Permalink to &quot;注意事项&quot;">​</a></h3><ul><li><code>Array.isArray()</code> 是一个静态方法，直接通过 <code>Array</code> 对象调用，而不是通过数组实例调用。</li><li>该方法对于检测由其他窗口或框架创建的数组是不可靠的，因为不同的全局执行环境有不同的构造函数。</li><li>如果需要在数组的原型链上判断一个对象是否为数组，可以使用 <code>Array.prototype.isPrototypeOf()</code> 方法。</li></ul><h3 id="总结-40" tabindex="-1">总结 <a class="header-anchor" href="#总结-40" aria-label="Permalink to &quot;总结&quot;">​</a></h3><p><code>Array.isArray()</code> 方法是用于判断给定的值是否为数组的实用工具函数。通过检查值的类型，它返回一个布尔值来指示是否为数组。</p><h2 id="_42-什么是稀疏数组" tabindex="-1">42. 什么是稀疏数组 <a class="header-anchor" href="#_42-什么是稀疏数组" aria-label="Permalink to &quot;42. 什么是稀疏数组&quot;">​</a></h2><p>稀疏数组是指数组中包含有空槽（empty slot）的数组。空槽指的是在数组中没有被赋值的位置，也就是说在数组中存在间隔的索引值，对应的元素值为 undefined。</p><p>例如，下面是一个稀疏数组的示例：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> sparseArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [“白日依山尽”</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> ”更上一层楼“]</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>在上面的示例中，索引为 1 和 2 的位置是空槽，没有被赋予任何值。这样的数组在内部表示中会占用更少的内存空间，因为它只存储有值的元素和对应的索引关系。</p><p>需要注意的是，稀疏数组的长度（length）属性仍然会考虑空槽的存在，即它会计算空槽的数量在内。在进行遍历或使用一些数组方法时，空槽会被视为 undefined 值。</p><p>以下是一些处理稀疏数组的注意事项：</p><ol><li>遍历稀疏数组时，空槽会被跳过：</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> sparseArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [“白日依山尽”</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> “更上一层楼“]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">sparseArray</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">element</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">element</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="2"><li>空槽在数组方法中被当作 undefined 值处理：</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> sparseArray </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [“白日依山尽”</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> ”更上一层楼“]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(sparseArray</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(sparseArray[</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">])</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(sparseArray</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">undefined</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 输出：true</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="3"><li>在稀疏数组上使用一些数组方法可能会导致不一致的结果，因为空槽不会被传递给回调函数或参与计算。因此，在处理稀疏数组时需要注意这些行为差异。</li></ol><p>需要注意的是，大多数情况下，稀疏数组并不常见，通常更多地使用密集数组（dense array），其中所有的索引位置都有被赋值的元素。</p><h2 id="总结-41" tabindex="-1">总结 <a class="header-anchor" href="#总结-41" aria-label="Permalink to &quot;总结&quot;">​</a></h2><p>读完这篇文章，相信我们对 JavaScript 数组的常用方法和特性有了更清楚的了解。无论是添加、删除、切片、拼接，还是遍历和验证，数组提供了丰富的功能和灵活性，使我们能够更好地处理和操作数据。希望本文对您有所启发，并能在实际开发和创作中发挥作用！</p></div></div></main><footer class="VPDocFooter" data-v-c4b0d3cf data-v-face870a><!--[--><!--]--><div class="edit-info" data-v-face870a><!----><div class="last-updated" data-v-face870a><p class="VPLastUpdated" data-v-face870a data-v-7b3ebfe1>上次更新: <time datetime="2023-06-01T06:22:32.000Z" data-v-7b3ebfe1></time></p></div></div><div class="prev-next" data-v-face870a><div class="pager" data-v-face870a><a class="pager-link prev" href="/yanfu_notes/dailyNotes/01/learn01" data-v-face870a><span class="desc" data-v-face870a>上一篇</span><span class="title" data-v-face870a>10+个 JavaScript 单行代码</span></a></div><div class="has-prev pager" data-v-face870a><a class="pager-link next" href="/yanfu_notes/dailyNotes/01/learn03" data-v-face870a><span class="desc" data-v-face870a>下一篇</span><span class="title" data-v-face870a>正则相关</span></a></div></div></footer><!--[--><!--[--><!--[--><div class="copyright" data-v-e71ae0b1><img class="visitor" src="https://visitor-badge.laobi.icu/badge?page_id=yanfu./dailyNotes/01/learn02" title="当前页面累计访问数" onerror="this.style.display=&#39;none&#39;" data-v-e71ae0b1> Copyright © 2019-present 烟浮YanFu </div><!--]--><!--]--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-b2cf3e0b data-v-2f86ebd2><div class="container" data-v-2f86ebd2><p class="message" data-v-2f86ebd2>如有转载或 CV 的请标注本站原文地址</p><p class="copyright" data-v-2f86ebd2>Copyright © 2023-present 烟浮YanFu</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"dailynotes_01_learn01.md\":\"fb9d824e\",\"dailynotes_01_learn03.md\":\"60f46bc0\",\"dailynotes_02_learn01.md\":\"7416609d\",\"dailynotes_01_learn02.md\":\"8e1f9322\",\"efficiency_software_cross-platform.md\":\"3f9dbff0\",\"efficiency_online-tools.md\":\"164f32c7\",\"efficiency_bookmark-scripts.md\":\"6c8f7c3b\",\"efficiency_software_browser.md\":\"d56ea2c6\",\"efficiency_software_mac.md\":\"89e295d7\",\"efficiency_software_webstorm.md\":\"f520bee8\",\"efficiency_software_windows.md\":\"a4b1847b\",\"pit_element_plus.md\":\"c486ecc4\",\"index.md\":\"0afacadf\",\"pit_h5.md\":\"74a083f0\",\"nav.md\":\"d2281484\",\"efficiency_software_vscode.md\":\"05a5d1ca\",\"pinia_learn01.md\":\"e4d4d76a\",\"pit_npm.md\":\"0ad9e23f\",\"pit_pc.md\":\"b86be787\",\"web_dockers_01_learn01.md\":\"d9a875dd\",\"web_dockers_02_learn01.md\":\"ba275b0f\",\"web_javascript_learn01.md\":\"4c60f698\",\"dailynotes_03_learn03.md\":\"8894bec4\",\"web_javascript_learn02.md\":\"0232787a\",\"web_javascript_learn03.md\":\"3bb3518c\",\"web_javascript_learn04.md\":\"265abc2b\",\"web_javascript_learn06.md\":\"9015895d\",\"web_javascript_learn05.md\":\"ef411c90\",\"web_javascript_learn07.md\":\"c2c69212\",\"web_javascript_learn09.md\":\"fa3a8fc7\",\"web_javascript_learn08.md\":\"3020b687\",\"web_javascript_learn10.md\":\"69910949\",\"web_javascript_learn12.md\":\"e84cf70e\",\"web_javascript_learn15.md\":\"91528dcd\",\"web_javascript_learn13.md\":\"8da7a486\",\"web_javascript_learn14.md\":\"302d3488\",\"web_javascript_learn17.md\":\"2369e6f4\",\"web_javascript_learn11.md\":\"c15229d7\",\"web_javascript_learn19.md\":\"b07bf70b\",\"web_javascript_learn16.md\":\"c8f4e19c\",\"web_javascript_learn20.md\":\"531d3a7d\",\"web_javascript_learn18.md\":\"11de8e86\",\"web_javascript_learn21.md\":\"1bac3aa3\",\"web_javascript_learn22.md\":\"459b0a5f\",\"dailynotes_03_learn01.md\":\"451a46a2\",\"web_javascript_learn24.md\":\"d1ceaca2\",\"web_javascript_top_learn02.md\":\"cadd2bb4\",\"web_javascript_learn23.md\":\"48da7355\",\"web_javascript_top_learn04.md\":\"9f44d103\",\"web_javascript_top_learn03.md\":\"93b74f4a\",\"web_javascript_top_learn01.md\":\"5007d6f4\",\"web_javascript_top_learn05.md\":\"76650f3a\",\"web_javascript_top_learn07.md\":\"64b677c1\",\"web_javascript_top_learn08.md\":\"93de8587\",\"web_javascript_top_learn06.md\":\"164b81a9\",\"web_javascript_top_learn09.md\":\"2dbcb5a0\",\"web_javascript_top_learn10.md\":\"465a5e5f\",\"web_javascript_top_learn11.md\":\"2e5c855f\",\"web_javascript_top_learn12.md\":\"8b341d16\",\"web_javascript_top_learn14.md\":\"9893f410\",\"web_javascript_top_learn15.md\":\"7fe2d8c4\",\"web_javascript_top_learn16.md\":\"6afe0a71\",\"web_javascript_top_learn17.md\":\"7d483cde\",\"web_javascript_top_learn13.md\":\"60fe7737\",\"web_javascript_top_learn18.md\":\"f2ad9e08\",\"web_javascript_top_learn19.md\":\"ca4e880b\",\"web_javascript_top_learn20.md\":\"e09985e1\",\"web_javascript_top_learn21.md\":\"f431bde8\",\"web_javascript_top_learn23.md\":\"1ca9118e\",\"web_javascript_top_learn22.md\":\"43c7120a\",\"web_javascript_top_learn24.md\":\"bc870303\",\"web_next_02_learn02.md\":\"d967166f\",\"web_next_02_learn03.md\":\"bbc5505d\",\"web_next_02_learn01.md\":\"84ff5279\",\"web_next_02_learn04.md\":\"a3a5e42a\",\"web_next_02_learn05.md\":\"f51c80d0\",\"web_next_01_learn01.md\":\"c7e46d8f\",\"web_next_02_learn07.md\":\"71216e95\",\"web_next_02_learn06.md\":\"7927c5af\",\"web_next_03_learn02.md\":\"9bede240\",\"web_next_03_learn03.md\":\"3ad4672d\",\"web_javascript_top_learn25.md\":\"826686c5\",\"web_next_03_learn01.md\":\"21002d61\",\"web_next_03_learn06.md\":\"5d763be0\",\"web_next_04_learn02.md\":\"0a16aca0\",\"web_next_04_learn01.md\":\"2d05c407\",\"web_next_03_learn04.md\":\"0990a5f4\",\"web_nodelearn_01_learn01.md\":\"961fc011\",\"web_next_03_learn05.md\":\"1ea11ee1\",\"web_nodelearn_01_learn02.md\":\"e31bd5c2\",\"web_nodelearn_01_learn03.md\":\"a0dbdda5\",\"web_nodelearn_01_learn04.md\":\"da3a7c4d\",\"web_nodelearn_02_learn01.md\":\"4c8a3429\",\"web_nodelearn_01_learn05.md\":\"4d7b266a\",\"web_nodelearn_02_learn03.md\":\"82b7c959\",\"web_nodelearn_02_learn06.md\":\"c5a69578\",\"web_nodelearn_02_learn05.md\":\"36e8211f\",\"web_nodelearn_02_learn04.md\":\"91b61deb\",\"web_nodelearn_02_learn07.md\":\"3646b8b1\",\"web_nodelearn_02_learn02.md\":\"daba3cb5\",\"web_nodelearn_03_learn01.md\":\"17b60c45\",\"web_nodelearn_03_learn04.md\":\"3a348bc5\",\"web_nodelearn_03_learn05.md\":\"e2316074\",\"web_nodelearn_03_learn02.md\":\"8ec48efb\",\"web_nodelearn_03_learn03.md\":\"8e6464e6\",\"web_nodelearn_04_learn02.md\":\"f2918e2b\",\"web_nodelearn_04_learn01.md\":\"e1e07a57\",\"web_nodelearn_04_learn03.md\":\"197f148a\",\"web_nodelearn_04_learn05.md\":\"01d005e4\",\"web_nodelearn_04_learn04.md\":\"5554e554\",\"web_nodelearn_04_learn06.md\":\"fd3ae81a\",\"web_nodelearn_04_learn08.md\":\"75d1b8f0\",\"web_nodelearn_04_learn09.md\":\"dac55aba\",\"web_nodelearn_05_learn01.md\":\"3d023037\",\"web_nodelearn_04_learn07.md\":\"e07185cf\",\"web_nodelearn_05_learn02.md\":\"ef127427\",\"web_nodelearn_05_learn03.md\":\"9ab16eeb\",\"web_nodelearn_05_learn04.md\":\"e476e037\",\"web_nodelearn_06_learn01.md\":\"441dc056\",\"web_nodelearn_06_learn02.md\":\"2a3570db\",\"web_nodelearn_06_learn03.md\":\"29ab46dd\",\"web_nodelearn_06_learn04.md\":\"cb981d59\",\"web_nodelearn_07_learn02.md\":\"0ea2b76f\",\"web_nodelearn_07_learn01.md\":\"8584ca0a\",\"web_nuxt3_01_learn01.md\":\"87060502\",\"web_nodelearn_07_learn03.md\":\"2ae0d2ba\",\"web_nuxt3_01_learn02.md\":\"650e16a3\",\"web_nuxt3_01_learn04.md\":\"e1789d7b\",\"web_nuxt3_01_learn03.md\":\"0c84a2bb\",\"web_nuxt3_01_learn05.md\":\"a64f0991\",\"web_nuxt3_01_learn07.md\":\"be86f7ed\",\"web_nuxt3_01_learn06.md\":\"6a8069ab\",\"web_nuxt3_02_learn01.md\":\"3d5cef8d\",\"web_nuxt3_02_learn02.md\":\"7b907f5e\",\"web_nuxt3_02_learn05.md\":\"a7113c22\",\"web_nuxt3_02_learn04.md\":\"19a8b1db\",\"web_nuxt3_02_learn03.md\":\"ef8ae51a\",\"web_nuxt3_02_learn06.md\":\"1948f7e1\",\"web_nuxt3_03_learn01.md\":\"62c770a2\",\"web_nuxt3_02_learn07.md\":\"758fe1ac\",\"web_nuxt3_03_learn02.md\":\"fe0b0d28\",\"web_nuxt3_03_learn04.md\":\"00c36249\",\"web_nuxt3_03_learn03.md\":\"f68d33b2\",\"web_nuxt3_03_learn05.md\":\"c3c5e972\",\"web_nuxt3_03_learn06.md\":\"044a942d\",\"web_nuxt3_03_learn07.md\":\"08354a10\",\"web_nuxt3_04_learn02.md\":\"96f39d45\",\"web_nuxt3_04_learn01.md\":\"f0e8d66e\",\"web_nuxt3_04_learn03.md\":\"1f3d1e23\",\"web_nuxt3_04_learn04.md\":\"fc3fddd0\",\"web_nuxt3_04_learn05.md\":\"1548e8b4\",\"web_nuxt3_04_learn06.md\":\"3fd55dff\",\"web_nuxt3_04_learn07.md\":\"ffc131f8\",\"web_nuxt3_04_learn08.md\":\"2c8b4d85\",\"web_nuxt3_05_learn01.md\":\"be7f2116\",\"web_nuxt3_05_learn02.md\":\"cc1f7467\",\"web_nuxt3_05_learn03.md\":\"13fc3eb1\",\"web_react_01_learn01.md\":\"5c6bdd83\",\"web_react_01_learn02.md\":\"47f7eef9\",\"web_react_01_learn03.md\":\"933b75f8\",\"web_react_01_learn04.md\":\"9ad864e5\",\"web_react_01_learn05.md\":\"2ed01344\",\"web_react_01_learn06.md\":\"af1af381\",\"web_react_03_learn01.md\":\"a8bb7a1b\",\"web_react_02_learn01.md\":\"ec1f531d\",\"web_react_04_learn01.md\":\"4a742238\",\"web_react_01_learn07.md\":\"7b8d820c\",\"web_react_05_learn01.md\":\"dff53736\",\"web_react_05_learn02.md\":\"7faa96b5\",\"web_react_05_learn03.md\":\"dbac9935\",\"web_react_05_learn04.md\":\"49f1a60c\",\"web_react_05_learn05.md\":\"ecf18497\",\"web_react_05_learn06.md\":\"9f082023\",\"web_react_05_learn07.md\":\"5a6bdbbf\",\"web_react_05_learn08.md\":\"20ee9801\",\"web_react_05_learn09.md\":\"cf842354\",\"web_react_05_learn10.md\":\"a84f17f3\",\"web_react_05_learn11.md\":\"f2f2cc46\",\"web_react_05_learn12.md\":\"c71ceb8d\",\"web_react_05_learn13.md\":\"7780636e\",\"web_react_05_learn14.md\":\"68ed1e1d\",\"web_react_05_learn17.md\":\"c3432bb6\",\"web_react_05_learn16.md\":\"70c399ca\",\"web_react_05_learn18.md\":\"261f269b\",\"web_react_05_learn20.md\":\"e7801f11\",\"web_react_05_learn15.md\":\"974a98ac\",\"web_react_05_learn19.md\":\"47c5beea\",\"web_react_10_learn01.md\":\"935bfaee\",\"web_react_06_learn02.md\":\"01be4891\",\"web_react_09_learn03.md\":\"08fa6271\",\"web_react_07_learn01.md\":\"29f2f337\",\"web_react_07_learn02.md\":\"ce0d9a16\",\"web_react_09_learn04.md\":\"15ae7e28\",\"web_react_09_learn01.md\":\"987aa5a1\",\"web_react_11_learn02.md\":\"3748cedf\",\"web_react_08_learn01.md\":\"53bd602b\",\"web_react_11_learn01.md\":\"37fe9111\",\"web_react_09_learn02.md\":\"f87c507b\",\"web_react_06_learn01.md\":\"1641040d\",\"web_react_13_learn01.md\":\"b436cd63\",\"web_react_12_learn01.md\":\"1fd95aeb\",\"web_react_11_learn03.md\":\"75f8874c\",\"web_vue2_01_learn01.md\":\"9d391eaf\",\"web_react_15_learn01.md\":\"d9583687\",\"web_react_15_learn02.md\":\"05c63fab\",\"web_vue2_01_learn02.md\":\"0a74ccbb\",\"web_vue2_01_learn03.md\":\"d607dbf6\",\"web_react_14_learn01.md\":\"bed15afa\",\"web_vue2_02_learn01.md\":\"f4dc2209\",\"web_vue2_01_learn05.md\":\"5c8d4172\",\"web_vue2_01_learn06.md\":\"96effce5\",\"web_vue2_01_learn04.md\":\"eb8e1bd9\",\"web_vue2_02_learn02.md\":\"3877d4ed\",\"web_vue2_02_learn07.md\":\"a055c961\",\"web_vue2_02_learn05.md\":\"cce18aad\",\"web_vue2_02_learn04.md\":\"905d9901\",\"web_vue2_03_learn01.md\":\"9f11b4a0\",\"web_vue2_02_learn06.md\":\"4a0fcaed\",\"web_vue2_02_learn03.md\":\"185ecac6\",\"web_vue2_02_learn09.md\":\"5178083c\",\"web_vue2_02_learn10.md\":\"87336e03\",\"web_vue2_02_learn08.md\":\"7dc37766\",\"web_vue2_03_learn04.md\":\"1e16efbc\",\"web_vue2_03_learn02.md\":\"e6c1fa09\",\"web_vue2_03_learn03.md\":\"ceae501d\",\"web_vue2_04_learn01.md\":\"8c54fd83\",\"web_vue2_05_learn01.md\":\"3169061e\",\"web_vue2_04_learn03.md\":\"0ca42ac5\",\"web_vue2_05_learn02.md\":\"304e2941\",\"web_vue2_04_learn02.md\":\"622c33d8\",\"web_vue2_05_learn03.md\":\"5979941e\",\"web_vue2_06_learn04.md\":\"64cea819\",\"web_vue2_06_learn02.md\":\"b634d59a\",\"web_vue2_06_learn05.md\":\"ee19cbfb\",\"web_vue2_06_learn03.md\":\"c1fd8196\",\"web_vue2_06_learn01.md\":\"1e52942e\",\"web_vue3_01_learn01.md\":\"82114093\",\"web_vue3_01_learn02.md\":\"d571309c\",\"web_vue3_01_learn04.md\":\"15f2d70e\",\"web_vue3_02_learn01.md\":\"c9d2f88d\",\"web_vue3_01_learn03.md\":\"3df60f72\",\"web_vue3_03_learn01.md\":\"3f3e17ff\",\"web_vue3_03_learn02.md\":\"2896b97e\",\"web_vue3_02_learn02.md\":\"2afe7860\",\"web_vue3_04_learn01.md\":\"108d149d\",\"web_vue3_02_learn03.md\":\"52d95fa1\",\"web_vue3_04_learn02.md\":\"1648f04f\",\"web_vue3_04_learn03.md\":\"c0ecea8f\",\"web_vue3_05_learn01.md\":\"ab316a81\",\"web_vue3_04_learn04.md\":\"bc98d39e\",\"web_vue3_05_learn02.md\":\"0ed1e38f\",\"web_vue3_05_learn04.md\":\"72f14eec\",\"web_vue3_05_learn03.md\":\"bc3eb3ef\",\"web_vue3_06_learn01.md\":\"47e43ea2\",\"web_vue3_08_learn02.md\":\"1b8b9db4\",\"web_vue3_08_learn01.md\":\"5d12764d\",\"web_vue3_07_learn01.md\":\"128c70d7\",\"web_vue3_08_learn03.md\":\"57e4f4bb\",\"web_vue3_08_learn05.md\":\"f8d0e1a9\",\"web_vue3_09_learn01.md\":\"f1681401\",\"web_vue3_08_learn04.md\":\"c125dc9b\",\"web_vue3_10_learn01.md\":\"973e7a22\",\"web_vue3_10_learn02.md\":\"7c28883c\",\"web_vue3_10_learn04.md\":\"cf850441\",\"web_vue3_10_learn03.md\":\"39786c19\",\"web_wechatcloud_01_learn01.md\":\"c0cb77c6\",\"web_vue3_10_learn05.md\":\"cf075dec\",\"web_vue3_09_learn02.md\":\"eeb4260d\",\"web_vue3_10_learn06.md\":\"b11efb72\",\"web_wechatcloud_01_learn03.md\":\"67fe320c\",\"web_wechatcloud_01_learn02.md\":\"c648b2aa\",\"web_wechatcloud_02_learn01.md\":\"a46b0864\",\"web_wechatcloud_02_learn03.md\":\"2ddc8141\",\"workflow_css_spec.md\":\"55fbec8c\",\"web_wechatcloud_01_learn04.md\":\"6c04db91\",\"web_wechatcloud_02_learn02.md\":\"b171bac6\",\"web_wechatcloud_03_learn01.md\":\"9fc1ac64\",\"workflow_elementui_learn01.md\":\"a1bcd127\",\"workflow_css_tricks.md\":\"a9fa02fa\",\"workflow_node_npm.md\":\"103cf0c6\",\"workflow_git_learn01.md\":\"ff359afd\",\"workflow_git_learn02.md\":\"507f5149\",\"workflow_css_svg.md\":\"dca1daac\",\"workflow_node_nvm.md\":\"13dc221b\",\"workflow_terminal_learn01.md\":\"1364b976\",\"workflow_terminal_learn02.md\":\"80e2ebd7\",\"workflow_terminal_shell.md\":\"de574807\",\"workflow_sass_index.md\":\"f4757f43\",\"workflow_terminal_toolkit.md\":\"46798207\",\"workflow_terminal_zsh.md\":\"b2e1938e\",\"workflow_utils_library.md\":\"4c2486a6\",\"workflow_utils_regexp.md\":\"0130508f\",\"workflow_utils_function.md\":\"abb59169\",\"workflow_vite_learn03.md\":\"edbe71ab\",\"workflow_vite_learn02.md\":\"890073b5\",\"workflow_vue_index.md\":\"31088bc4\",\"workflow_vite_learn01.md\":\"a4fddb0a\",\"dailynotes_03_learn02.md\":\"e485b2dd\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"烟浮YanFu\",\"description\":\"烟浮YanFu的成长之路，包含前端常用知识、源码阅读笔记、各种奇淫技巧、日常提效工具等\",\"base\":\"/yanfu_notes/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/images/avatar.jpeg\",\"siteTitle\":\"烟浮YanFu\",\"i18nRouting\":false,\"nav\":[{\"text\":\"导航\",\"link\":\"/nav\",\"activeMatch\":\"^/nav\"},{\"text\":\"学习笔记\",\"items\":[{\"items\":[{\"text\":\"JavaScript 基础\",\"link\":\"/web/JavaScript/learn01\"},{\"text\":\"JavaScript 高级\",\"link\":\"/web/JavaScript_top/learn01\"}]},{\"items\":[{\"text\":\"Vue2\",\"link\":\"/web/vue2/01/learn01\"},{\"text\":\"Vue3\",\"link\":\"/web/vue3/01/learn01\"},{\"text\":\"pinia\",\"link\":\"/pinia/learn01\"},{\"text\":\"Nuxt3\",\"link\":\"/web/Nuxt3/01/learn01\"}]},{\"items\":[{\"text\":\"React\",\"link\":\"/web/react/01/learn01\"},{\"text\":\"Next\",\"link\":\"/web/Next/01/learn01\"}]},{\"items\":[{\"text\":\"Node\",\"link\":\"/web/NodeLearn/01/learn01\"},{\"text\":\"Docker\",\"link\":\"/web/Dockers/01/learn01\"}]},{\"items\":[{\"text\":\"微信小程序\",\"link\":\"/web/wechatCloud/01/learn01\"}]}],\"activeMatch\":\"^/web\"},{\"text\":\"日常笔记\",\"activeMatch\":\"^/dailyNotes\",\"items\":[{\"text\":\"JavaScript 相关\",\"items\":[{\"text\":\"优雅的 JavaScript 单行代码\",\"link\":\"/dailyNotes/01/learn01\"},{\"text\":\"Array 下有多少原型方法\",\"link\":\"/dailyNotes/01/learn02\"},{\"text\":\"正则相关\",\"link\":\"/dailyNotes/01/learn03\"}]},{\"text\":\"Vue 相关\",\"items\":[{\"text\":\"使用 defer 优化白屏时间\",\"link\":\"/dailyNotes/02/learn01\"}]},{\"text\":\"css 相关\",\"items\":[{\"text\":\"loading\",\"link\":\"/dailyNotes/03/learn01\"}]}]},{\"text\":\"源码学习\",\"link\":\"/web/vue3/06/learn01\",\"activeMatch\":\"^/web/vue3/\"},{\"text\":\"Workflow\",\"items\":[{\"text\":\"常用工具/方法\",\"items\":[{\"text\":\"工具库整理\",\"link\":\"/workflow/utils/library\"},{\"text\":\"常用正则整理\",\"link\":\"/workflow/utils/regexp\"},{\"text\":\"常用方法整理\",\"link\":\"/workflow/utils/function\"}]},{\"text\":\"CSS 相关\",\"items\":[{\"text\":\"CSS 语法\",\"link\":\"/workflow/css/spec\"},{\"text\":\"CSS 奇淫技巧\",\"link\":\"/workflow/css/tricks\"},{\"text\":\"Sass 常用技巧\",\"link\":\"/workflow/sass/\"}]},{\"text\":\"element-ui 相关\",\"items\":[{\"text\":\"切换主题\",\"link\":\"/workflow/elementUI/learn01\"}]},{\"text\":\"Vue 小技巧\",\"link\":\"/workflow/vue/\"},{\"text\":\"Vite 相关\",\"link\":\"/workflow/vite/learn01\"},{\"text\":\"node 相关\",\"link\":\"/workflow/node/npm\"},{\"text\":\"终端相关\",\"items\":[{\"text\":\"Zsh 配置\",\"link\":\"/workflow/terminal/zsh\"},{\"text\":\"命令行工具\",\"link\":\"/workflow/terminal/toolkit\"},{\"text\":\"Shell 命令\",\"link\":\"/workflow/terminal/shell\"}]},{\"text\":\"Git 相关\",\"link\":\"/workflow/git/learn01\"}],\"activeMatch\":\"^/workflow\"},{\"text\":\"踩坑记录\",\"link\":\"/pit/npm\",\"activeMatch\":\"^/pit\"},{\"text\":\"提效工具\",\"items\":[{\"text\":\"软件推荐与配置\",\"items\":[{\"text\":\"多平台软件\",\"link\":\"/efficiency/software/cross-platform\"},{\"text\":\"Mac 平台\",\"link\":\"/efficiency/software/mac\"},{\"text\":\"Windows 平台\",\"link\":\"/efficiency/software/windows\"},{\"text\":\"浏览器设置与扩展\",\"link\":\"/efficiency/software/browser\"},{\"text\":\"Visual Studio Code 配置\",\"link\":\"/efficiency/software/vscode\"},{\"text\":\"WebStorm 配置\",\"link\":\"/efficiency/software/webstorm\"}]},{\"text\":\"在线工具\",\"link\":\"/efficiency/online-tools\"},{\"text\":\"书签脚本\",\"link\":\"/efficiency/bookmark-scripts\"}],\"activeMatch\":\"^/efficiency\"},{\"text\":\"烟浮YanFu\",\"link\":\"https://gitee.com/addminsjh\"}],\"sidebar\":{\"/web/JavaScript/\":[{\"text\":\"JavaScript 基础\",\"items\":[{\"text\":\"JS DOM--什么是DOM\",\"link\":\"/web/JavaScript/learn01\"},{\"text\":\"JS DOM--查找元素\",\"link\":\"/web/JavaScript/learn02\"},{\"text\":\"JS DOM--父、子和兄弟元素\",\"link\":\"/web/JavaScript/learn03\"},{\"text\":\"JS DOM--创建元素、插入元素\",\"link\":\"/web/JavaScript/learn04\"},{\"text\":\"JS DOM--appendChild、textContent、innerText、innerHTML\",\"link\":\"/web/JavaScript/learn05\"},{\"text\":\"innerHTML vs createElement\",\"link\":\"/web/JavaScript/learn06\"},{\"text\":\"insertBefore、insertAfter、append、prepend\",\"link\":\"/web/JavaScript/learn07\"},{\"text\":\"replaceChild、cloneNode、removeChild\",\"link\":\"/web/JavaScript/learn08\"},{\"text\":\"insertAdjacentHTML\",\"link\":\"/web/JavaScript/learn09\"},{\"text\":\"属性操作\",\"link\":\"/web/JavaScript/learn10\"},{\"text\":\"操作style样式、class、getComputedStyle\",\"link\":\"/web/JavaScript/learn11\"},{\"text\":\"事件初识\",\"link\":\"/web/JavaScript/learn12\"},{\"text\":\"三种事件绑定方式\",\"link\":\"/web/JavaScript/learn13\"},{\"text\":\"DOMContentLoaded、load、beforeunload 和 unload\",\"link\":\"/web/JavaScript/learn14\"},{\"text\":\"详解load事件\",\"link\":\"/web/JavaScript/learn15\"},{\"text\":\"详解鼠标事件\",\"link\":\"/web/JavaScript/learn16\"},{\"text\":\"键盘事件\",\"link\":\"/web/JavaScript/learn17\"},{\"text\":\"滚动事件\",\"link\":\"/web/JavaScript/learn18\"},{\"text\":\"scrollIntoView()\",\"link\":\"/web/JavaScript/learn19\"},{\"text\":\"理解事件委托\",\"link\":\"/web/JavaScript/learn20\"},{\"text\":\"dispatchEvent()\",\"link\":\"/web/JavaScript/learn21\"},{\"text\":\"自定义事件\",\"link\":\"/web/JavaScript/learn22\"},{\"text\":\"MutationObserver是干什么的\",\"link\":\"/web/JavaScript/learn23\"},{\"text\":\"原生表单\",\"link\":\"/web/JavaScript/learn24\"}]}],\"/web/JavaScript_top/\":[{\"text\":\"JavaScript 高级\",\"items\":[{\"text\":\"创建对象 7 种方式，原型链，call/apply/bind\",\"link\":\"/web/JavaScript_top/learn01\"},{\"text\":\"数组slice和splice怎么使用-区别？\",\"link\":\"/web/JavaScript_top/learn02\"},{\"text\":\"箭头函数，高阶函数，柯里化函数，纯函数\",\"link\":\"/web/JavaScript_top/learn03\"},{\"text\":\"==和===和Object.is()的区别\",\"link\":\"/web/JavaScript_top/learn04\"},{\"text\":\"JS手写从URL中获取指定参数-3种方式\",\"link\":\"/web/JavaScript_top/learn05\"},{\"text\":\"8个JS的reduce使用实例，和reduce的骚操作\",\"link\":\"/web/JavaScript_top/learn06\"},{\"text\":\"axios/fetch/XMLHttpRequest怎么取消请求\",\"link\":\"/web/JavaScript_top/learn07\"},{\"text\":\"用易懂的方式理解JS中new关键字\",\"link\":\"/web/JavaScript_top/learn08\"},{\"text\":\"4个超级实用JS小技巧 少写代码 提升开发效率\",\"link\":\"/web/JavaScript_top/learn09\"},{\"text\":\"JavaScript Proxy学习笔记-1\",\"link\":\"/web/JavaScript_top/learn10\"},{\"text\":\"JavaScript Proxy学习笔记-2\",\"link\":\"/web/JavaScript_top/learn11\"},{\"text\":\"JavaScript Promise学习笔记-1\",\"link\":\"/web/JavaScript_top/learn12\"},{\"text\":\"JavaScript Promise链式调用-2\",\"link\":\"/web/JavaScript_top/learn13\"},{\"text\":\"JavaScript Promise.all()\",\"link\":\"/web/JavaScript_top/learn14\"},{\"text\":\"JavaScript Promise.race()\",\"link\":\"/web/JavaScript_top/learn15\"},{\"text\":\"JavaScript Promise的错误处理\",\"link\":\"/web/JavaScript_top/learn16\"},{\"text\":\"ES6新数据类型 Set\",\"link\":\"/web/JavaScript_top/learn17\"},{\"text\":\"ES6新数据类型 Map\",\"link\":\"/web/JavaScript_top/learn18\"},{\"text\":\"全面理解ES6模块化编程\",\"link\":\"/web/JavaScript_top/learn19\"},{\"text\":\"JavaScript ES6 Symbol\",\"link\":\"/web/JavaScript_top/learn20\"},{\"text\":\"JavaScript数组迭代方法\",\"link\":\"/web/JavaScript_top/learn21\"},{\"text\":\"JavaScript String原生方法\",\"link\":\"/web/JavaScript_top/learn22\"},{\"text\":\"数组查找项\",\"link\":\"/web/JavaScript_top/learn23\"},{\"text\":\"ES6-ES12\",\"link\":\"/web/JavaScript_top/learn24\"},{\"text\":\"ES6 常用知识\",\"link\":\"/web/JavaScript_top/learn25\"}]}],\"/web/vue2/\":[{\"text\":\"Vue2\",\"items\":[{\"text\":\"前端工程化与 webpack\",\"collapsed\":true,\"items\":[{\"text\":\"前端工程化\",\"link\":\"/web/vue2/01/learn01\"},{\"text\":\"webpack 的基本使用\",\"link\":\"/web/vue2/01/learn02\"},{\"text\":\"webpack 插件的作用\",\"link\":\"/web/vue2/01/learn03\"},{\"text\":\"webpack 中的 loader\",\"link\":\"/web/vue2/01/learn04\"},{\"text\":\"打包发布\",\"link\":\"/web/vue2/01/learn05\"},{\"text\":\"Source Map\",\"link\":\"/web/vue2/01/learn06\"}]},{\"text\":\"基础入门\",\"collapsed\":true,\"items\":[{\"text\":\"Vue 的基本使用\",\"link\":\"/web/vue2/02/learn01\"},{\"text\":\"Vue 的调试工具\",\"link\":\"/web/vue2/02/learn02\"},{\"text\":\"Vue 的指令与过滤器\",\"link\":\"/web/vue2/02/learn03\"},{\"text\":\"品牌列表案例\",\"link\":\"/web/vue2/02/learn04\"},{\"text\":\"侦听器\",\"link\":\"/web/vue2/02/learn05\"},{\"text\":\"计算属性\",\"link\":\"/web/vue2/02/learn06\"},{\"text\":\"Vue-cli\",\"link\":\"/web/vue2/02/learn07\"},{\"text\":\"Vue 组件\",\"link\":\"/web/vue2/02/learn08\"},{\"text\":\"axios\",\"link\":\"/web/vue2/02/learn09\"},{\"text\":\"计算属补充性\",\"link\":\"/web/vue2/02/learn10\"}]},{\"text\":\"生命周期 & 数据共享\",\"collapsed\":true,\"items\":[{\"text\":\"组件的生命周期\",\"link\":\"/web/vue2/03/learn01\"},{\"text\":\"组件之间的数据共享\",\"link\":\"/web/vue2/03/learn02\"},{\"text\":\"ref 引用\",\"link\":\"/web/vue2/03/learn03\"},{\"text\":\"总结\",\"link\":\"/web/vue2/03/learn04\"}]},{\"text\":\"动态组件/插槽/自定义指令\",\"collapsed\":true,\"items\":[{\"text\":\"动态组件\",\"link\":\"/web/vue2/04/learn01\"},{\"text\":\"插槽\",\"link\":\"/web/vue2/04/learn02\"},{\"text\":\"自定义指令\",\"link\":\"/web/vue2/04/learn03\"}]},{\"text\":\"路由\",\"collapsed\":true,\"items\":[{\"text\":\"前端路由的概念与原理\",\"link\":\"/web/vue2/05/learn01\"},{\"text\":\"vue-router 的基本使用\",\"link\":\"/web/vue2/05/learn02\"},{\"text\":\"vue-router 的常见用法\",\"link\":\"/web/vue2/05/learn03\"}]},{\"text\":\"打包相关\",\"collapsed\":true,\"items\":[{\"text\":\"Token 续签\",\"link\":\"/web/vue2/06/learn01\"},{\"text\":\"项目优化\",\"link\":\"/web/vue2/06/learn02\"},{\"text\":\"打包发布\",\"link\":\"/web/vue2/06/learn03\"},{\"text\":\"vant 修改主题\",\"link\":\"/web/vue2/06/learn04\"},{\"text\":\"APP滚动停留保持位置\",\"link\":\"/web/vue2/06/learn05\"}]}]}],\"/web/vue3/\":[{\"text\":\"Vue3\",\"items\":[{\"text\":\"Vue3开发体验\",\"collapsed\":true,\"items\":[{\"text\":\"Vue3开发\",\"link\":\"/web/vue3/01/learn01\"},{\"text\":\"Vue基础-模板语法\",\"link\":\"/web/vue3/01/learn02\"},{\"text\":\"Options-API\",\"link\":\"/web/vue3/01/learn03\"},{\"text\":\"Vue3 开发模式\",\"link\":\"/web/vue3/01/learn04\"}]},{\"text\":\"Webpack基础\",\"collapsed\":true,\"items\":[{\"text\":\"Webpack基础打包\",\"link\":\"/web/vue3/02/learn01\"},{\"text\":\"Webpack打包其他资源\",\"link\":\"/web/vue3/02/learn02\"},{\"text\":\"Babel和devServer\",\"link\":\"/web/vue3/02/learn03\"}]},{\"text\":\"VueCLI和Vite\",\"collapsed\":true,\"items\":[{\"text\":\"VueCLI\",\"link\":\"/web/vue3/03/learn01\"},{\"text\":\"Vite\",\"link\":\"/web/vue3/03/learn02\"}]},{\"text\":\"Vue3组件化开发\",\"collapsed\":true,\"items\":[{\"text\":\"Vue3组件化开发一\",\"link\":\"/web/vue3/04/learn01\"},{\"text\":\"Vue3组件化开发二\",\"link\":\"/web/vue3/04/learn02\"},{\"text\":\"Vue3组件化开发三\",\"link\":\"/web/vue3/04/learn03\"},{\"text\":\"Vue3过渡&动画实现\",\"link\":\"/web/vue3/04/learn04\"}]},{\"text\":\"Composition API\",\"collapsed\":true,\"items\":[{\"text\":\"Composition API(一)\",\"link\":\"/web/vue3/05/learn01\"},{\"text\":\"Composition API(二)\",\"link\":\"/web/vue3/05/learn02\"},{\"text\":\"Composition API(三)\",\"link\":\"/web/vue3/05/learn03\"},{\"text\":\"Vue3高级语法补充\",\"link\":\"/web/vue3/05/learn04\"}]},{\"text\":\"Vue3源码学习\",\"collapsed\":true,\"items\":[{\"text\":\"Vue3源码学习\",\"link\":\"/web/vue3/06/learn01\"}]},{\"text\":\"VueX\",\"collapsed\":true,\"items\":[{\"text\":\"Vuex的状态管理\",\"link\":\"/web/vue3/07/learn01\"}]},{\"text\":\"TypeScript\",\"collapsed\":true,\"items\":[{\"text\":\"TypeScript语法精讲(一)\",\"link\":\"/web/vue3/08/learn01\"},{\"text\":\"webpack 下搭建 TypeScript 运行环境\",\"link\":\"/web/vue3/08/learn02\"},{\"text\":\"TypeScript语法精讲(二)\",\"link\":\"/web/vue3/08/learn03\"},{\"text\":\"TypeScript语法精讲(三)\",\"link\":\"/web/vue3/08/learn04\"},{\"text\":\"TypeScript语法精讲(四)\",\"link\":\"/web/vue3/08/learn05\"}]},{\"text\":\"高阶组件封装\",\"collapsed\":true,\"items\":[{\"text\":\"网络请求封装\",\"link\":\"/web/vue3/09/learn01\"},{\"text\":\"自定义form表单高阶组件\",\"link\":\"/web/vue3/09/learn02\"}]},{\"text\":\"其他问题解决\",\"collapsed\":true,\"items\":[{\"text\":\"项目页面初始化\",\"link\":\"/web/vue3/10/learn01\"},{\"text\":\"element-plus 相关\",\"link\":\"/web/vue3/10/learn02\"},{\"text\":\"tsconfig.json 基本配置\",\"link\":\"/web/vue3/10/learn03\"},{\"text\":\"tsconfig.node.json 报错\",\"link\":\"/web/vue3/10/learn04\"},{\"text\":\"vue3+vite项目适配rem\",\"link\":\"/web/vue3/10/learn05\"},{\"text\":\"vue3 响应式移动端\",\"link\":\"/web/vue3/10/learn06\"}]}]}],\"/pinia/\":[{\"text\":\"pinia\",\"items\":[{\"text\":\"pinia\",\"link\":\"/pinia/learn01\"},{\"text\":\"Nuxt3 集成 Pinia\",\"link\":\"/web/Nuxt3/04/learn07\"}]}],\"/web/react/\":[{\"text\":\"React\",\"items\":[{\"text\":\"React 初体验\",\"collapsed\":true,\"items\":[{\"text\":\"初体验 React\",\"link\":\"/web/react/01/learn01\"},{\"text\":\"jsx绑定属性\",\"link\":\"/web/react/01/learn02\"},{\"text\":\"jsx绑定事件、传递参数\",\"link\":\"/web/react/01/learn03\"},{\"text\":\"React 条件渲染\",\"link\":\"/web/react/01/learn04\"},{\"text\":\"React 列表渲染\",\"link\":\"/web/react/01/learn05\"},{\"text\":\"jsx 的本质\",\"link\":\"/web/react/01/learn06\"},{\"text\":\"阶段性案例-购物车\",\"link\":\"/web/react/01/learn07\"}]},{\"text\":\"脚手架\",\"link\":\"/web/react/02/learn01\"},{\"text\":\"render函数\",\"link\":\"/web/react/03/learn01\"},{\"text\":\"认识生命周期\",\"link\":\"/web/react/04/learn01\"},{\"text\":\"组件化开发\",\"collapsed\":true,\"items\":[{\"text\":\"组件化开发\",\"link\":\"/web/react/05/learn01\"},{\"text\":\"父传子通信\",\"link\":\"/web/react/05/learn02\"},{\"text\":\"参数验证 propTypes\",\"link\":\"/web/react/05/learn03\"},{\"text\":\"子传父\",\"link\":\"/web/react/05/learn04\"},{\"text\":\"组件通信案例练习\",\"link\":\"/web/react/05/learn05\"},{\"text\":\"React 实现插槽slot\",\"link\":\"/web/react/05/learn06\"},{\"text\":\"跨组件通信\",\"link\":\"/web/react/05/learn07\"},{\"text\":\"为什么使用 setState\",\"link\":\"/web/react/05/learn08\"},{\"text\":\"React 更新机制\",\"link\":\"/web/react/05/learn09\"},{\"text\":\"setState 不可变数据的力量\",\"link\":\"/web/react/05/learn10\"},{\"text\":\"全局事件传递\",\"link\":\"/web/react/05/learn11\"},{\"text\":\"ref 的使用\",\"link\":\"/web/react/05/learn12\"},{\"text\":\"ref 的类型(受控和非受控组件)\",\"link\":\"/web/react/05/learn13\"},{\"text\":\"认识高阶函数\",\"link\":\"/web/react/05/learn14\"},{\"text\":\"应用一 - props的增强\",\"link\":\"/web/react/05/learn15\"},{\"text\":\"应用二 - 渲染判断鉴权\",\"link\":\"/web/react/05/learn16\"},{\"text\":\"ref 的转发\",\"link\":\"/web/react/05/learn17\"},{\"text\":\"Porals 的使用\",\"link\":\"/web/react/05/learn18\"},{\"text\":\"Fragments\",\"link\":\"/web/react/05/learn19\"},{\"text\":\"StrictMode 严格模式\",\"link\":\"/web/react/05/learn20\"}]},{\"text\":\"React 中的样式\",\"collapsed\":true,\"items\":[{\"text\":\"认识CSS in JS\",\"link\":\"/web/react/06/learn01\"},{\"text\":\"React 中添加 class\",\"link\":\"/web/react/06/learn02\"}]},{\"text\":\"AntDesign 组件库\",\"collapsed\":true,\"items\":[{\"text\":\"AntDesign的介绍\",\"link\":\"/web/react/07/learn01\"},{\"text\":\"认识 craco\",\"link\":\"/web/react/07/learn02\"}]},{\"text\":\"React-Transition-Group\",\"link\":\"/web/react/08/learn01\"},{\"text\":\"Redux的使用\",\"collapsed\":true,\"items\":[{\"text\":\"JavaScript 纯函数\",\"link\":\"/web/react/09/learn01\"},{\"text\":\"React中的纯函数\",\"link\":\"/web/react/09/learn02\"},{\"text\":\"为什么需要 redux\",\"link\":\"/web/react/09/learn03\"},{\"text\":\"redux-thunk发送异步请求\",\"link\":\"/web/react/09/learn04\"}]},{\"text\":\"react-router\",\"link\":\"/web/react/10/learn01\"},{\"text\":\"React Hooks\",\"collapsed\":true,\"items\":[{\"text\":\"为什么需要Hook\",\"link\":\"/web/react/11/learn01\"},{\"text\":\"React中的纯函数\",\"link\":\"/web/react/11/learn02\"},{\"text\":\"useReducer 等Hook\",\"link\":\"/web/react/11/learn03\"}]},{\"text\":\"项目规范\",\"link\":\"/web/react/12/learn01\"},{\"text\":\"认识ImmutableJS\",\"link\":\"/web/react/13/learn01\"},{\"text\":\"redux 项目中的使用\",\"link\":\"/web/react/14/learn01\"},{\"text\":\"React SSR\",\"collapsed\":true,\"items\":[{\"text\":\"认识SSR\",\"link\":\"/web/react/15/learn01\"},{\"text\":\"使用React SSR\",\"link\":\"/web/react/15/learn02\"}]}]}],\"/web/Nuxt3/\":[{\"text\":\"Nuxt3\",\"items\":[{\"text\":\"Nuxt初体验\",\"collapsed\":true,\"items\":[{\"text\":\"单页面应用程序渲染原理\",\"link\":\"/web/Nuxt3/01/learn01\"},{\"text\":\"SPA 的有缺点\",\"link\":\"/web/Nuxt3/01/learn02\"},{\"text\":\"爬虫-工作流程\",\"link\":\"/web/Nuxt3/01/learn03\"},{\"text\":\"搜索引擎的优化(SEO)\",\"link\":\"/web/Nuxt3/01/learn04\"},{\"text\":\"静态站点生成(SSG)\",\"link\":\"/web/Nuxt3/01/learn05\"},{\"text\":\"服务器端渲染(SSR)\",\"link\":\"/web/Nuxt3/01/learn06\"},{\"text\":\"SSR 优缺点\",\"link\":\"/web/Nuxt3/01/learn07\"}]},{\"text\":\"Vue3 + SSR\",\"collapsed\":true,\"items\":[{\"text\":\"邂逅Vue3 + SSR\",\"link\":\"/web/Nuxt3/02/learn01\"},{\"text\":\"Node Server 搭建\",\"link\":\"/web/Nuxt3/02/learn02\"},{\"text\":\"Vue3 + SSR 搭建\",\"link\":\"/web/Nuxt3/02/learn03\"},{\"text\":\"Vue3 SSR + Hydration\",\"link\":\"/web/Nuxt3/02/learn04\"},{\"text\":\"跨请求状态污染\",\"link\":\"/web/Nuxt3/02/learn05\"},{\"text\":\"Vue3 SSR + Vue Router\",\"link\":\"/web/Nuxt3/02/learn06\"},{\"text\":\"Vue3 SSR + Pinia\",\"link\":\"/web/Nuxt3/02/learn07\"}]},{\"text\":\"Vue3 + Nuxt3 基础语法\",\"collapsed\":true,\"items\":[{\"text\":\"邂逅 Nuxt3\",\"link\":\"/web/Nuxt3/03/learn01\"},{\"text\":\"Nuxt3 初体验\",\"link\":\"/web/Nuxt3/03/learn02\"},{\"text\":\"Nuxt3 全局配置\",\"link\":\"/web/Nuxt3/03/learn03\"},{\"text\":\"Nuxt3 内置组件\",\"link\":\"/web/Nuxt3/03/learn04\"},{\"text\":\"Nuxt3 样式和资源\",\"link\":\"/web/Nuxt3/03/learn05\"},{\"text\":\"Nuxt3 页面和导航\",\"link\":\"/web/Nuxt3/03/learn06\"},{\"text\":\"Nuxt3 动态路由\",\"link\":\"/web/Nuxt3/03/learn07\"}]},{\"text\":\"Vue3 + Nuxt3 核心语法\",\"collapsed\":true,\"items\":[{\"text\":\"嵌套路由和中间件\",\"link\":\"/web/Nuxt3/04/learn01\"},{\"text\":\"Nuxt 自定义布局\",\"link\":\"/web/Nuxt3/04/learn02\"},{\"text\":\"页面渲染模式\",\"link\":\"/web/Nuxt3/04/learn03\"},{\"text\":\"Nuxt3 插件开发\",\"link\":\"/web/Nuxt3/04/learn04\"},{\"text\":\"Lifecycle Hooks\",\"link\":\"/web/Nuxt3/04/learn05\"},{\"text\":\"获取数据、API 接口\",\"link\":\"/web/Nuxt3/04/learn06\"},{\"text\":\"useState 和 Pinia\",\"link\":\"/web/Nuxt3/04/learn07\"},{\"text\":\"安装 Element plus\",\"link\":\"/web/Nuxt3/04/learn08\"}]},{\"text\":\"打包部署\",\"collapsed\":true,\"items\":[{\"text\":\"项目\",\"link\":\"/web/Nuxt3/05/learn01\"},{\"text\":\"安装 Node 和 PM2\",\"link\":\"/web/Nuxt3/05/learn02\"},{\"text\":\"Nuxt3 配置 tailwindcss daisyui\",\"link\":\"/web/Nuxt3/05/learn03\"}]}]}],\"/web/Next/\":[{\"text\":\"Next\",\"items\":[{\"text\":\"从零搭建SSR应用\",\"collapsed\":true,\"items\":[{\"text\":\"React18 + SSR\",\"link\":\"/web/Next/01/learn01\"}]},{\"text\":\"React18 Next 基础语法\",\"collapsed\":true,\"items\":[{\"text\":\"Next.js\",\"link\":\"/web/Next/02/learn01\"},{\"text\":\"Next.js 初体验\",\"link\":\"/web/Next/02/learn02\"},{\"text\":\"全局配置\",\"link\":\"/web/Next/02/learn03\"},{\"text\":\"内置组件\",\"link\":\"/web/Next/02/learn04\"},{\"text\":\"样式和资源\",\"link\":\"/web/Next/02/learn05\"},{\"text\":\"页面和导航\",\"link\":\"/web/Next/02/learn06\"},{\"text\":\"动态路由\",\"link\":\"/web/Next/02/learn07\"}]},{\"text\":\"React18 Next 核心语法\",\"collapsed\":true,\"items\":[{\"text\":\"中间件和匹配器\",\"link\":\"/web/Next/03/learn01\"},{\"text\":\"Layout和生命周期\",\"link\":\"/web/Next/03/learn02\"},{\"text\":\"网络请求的封装\",\"link\":\"/web/Next/03/learn03\"},{\"text\":\"编写后端接口\",\"link\":\"/web/Next/03/learn04\"},{\"text\":\"页面渲染模式\",\"link\":\"/web/Next/03/learn05\"},{\"text\":\"数据获取和Redux\",\"link\":\"/web/Next/03/learn06\"}]},{\"text\":\"React18 Next 项目相关\",\"collapsed\":true,\"items\":[{\"text\":\"项目中用到的库\",\"link\":\"/web/Next/04/learn01\"},{\"text\":\"项目打包和部署\",\"link\":\"/web/Next/04/learn02\"}]}]}],\"/web/wechatCloud/\":[{\"text\":\"微信小程序\",\"items\":[{\"text\":\"微信小程序\",\"collapsed\":true,\"items\":[{\"text\":\"微信小程序其他内容\",\"link\":\"/web/wechatCloud/02/learn01\"},{\"text\":\"页面跳转传参\",\"link\":\"/web/wechatCloud/02/learn02\"},{\"text\":\"小程序登录解析\",\"link\":\"/web/wechatCloud/02/learn03\"}]},{\"text\":\"微信小程序云开发\",\"collapsed\":true,\"items\":[{\"text\":\"云开发核心技术\",\"link\":\"/web/wechatCloud/01/learn01\"},{\"text\":\"云数据库的增删改查\",\"link\":\"/web/wechatCloud/01/learn02\"},{\"text\":\"云存储的文件系统\",\"link\":\"/web/wechatCloud/01/learn03\"},{\"text\":\"云函数和云调用\",\"link\":\"/web/wechatCloud/01/learn04\"}]},{\"text\":\"微信小程序其他\",\"collapsed\":true,\"items\":[{\"text\":\"微信小程序共享数据\",\"link\":\"/web/wechatCloud/03/learn01\"}]}]}],\"/web/NodeLearn/\":[{\"text\":\"Node\",\"items\":[{\"text\":\"Node 服务器\",\"collapsed\":true,\"items\":[{\"text\":\"http 模块\",\"link\":\"/web/NodeLearn/01/learn01\"},{\"text\":\"http服务器-request对象解析\",\"link\":\"/web/NodeLearn/01/learn02\"},{\"text\":\"http服务器-response响应对象\",\"link\":\"/web/NodeLearn/01/learn03\"},{\"text\":\"http 请求\",\"link\":\"/web/NodeLearn/01/learn04\"},{\"text\":\"文件上传\",\"link\":\"/web/NodeLearn/01/learn05\"}]},{\"text\":\"Node 服务器 express 框架\",\"collapsed\":true,\"items\":[{\"text\":\"Express 认识初体验\",\"link\":\"/web/NodeLearn/02/learn01\"},{\"text\":\"Express 中间件使用\",\"link\":\"/web/NodeLearn/02/learn02\"},{\"text\":\"Express 请求和响应\",\"link\":\"/web/NodeLearn/02/learn03\"},{\"text\":\"Express 路由的使用\",\"link\":\"/web/NodeLearn/02/learn04\"},{\"text\":\"Express 的错误处理\",\"link\":\"/web/NodeLearn/02/learn05\"},{\"text\":\"Express 的源码解析\",\"link\":\"/web/NodeLearn/02/learn06\"},{\"text\":\"Express 静态资源服务器\",\"link\":\"/web/NodeLearn/02/learn07\"}]},{\"text\":\"Node 服务器 koa 框架\",\"collapsed\":true,\"items\":[{\"text\":\"koa 的基本使用\",\"link\":\"/web/NodeLearn/03/learn01\"},{\"text\":\"koa 的参数解析\",\"link\":\"/web/NodeLearn/03/learn02\"},{\"text\":\"koa 响应和错误\",\"link\":\"/web/NodeLearn/03/learn03\"},{\"text\":\"koa 静态服务器\",\"link\":\"/web/NodeLearn/03/learn04\"},{\"text\":\"和 express 对比\",\"link\":\"/web/NodeLearn/03/learn05\"}]},{\"text\":\"MySQL 数据库\",\"collapsed\":true,\"items\":[{\"text\":\"MySQL 介绍和安装\",\"link\":\"/web/NodeLearn/04/learn01\"},{\"text\":\"MySQL 链接和 GUI\",\"link\":\"/web/NodeLearn/04/learn02\"},{\"text\":\"SQL 语句和数据类型\",\"link\":\"/web/NodeLearn/04/learn03\"},{\"text\":\"SQL 语句-DDL 语句\",\"link\":\"/web/NodeLearn/04/learn04\"},{\"text\":\"SQL 语句-DML 语句\",\"link\":\"/web/NodeLearn/04/learn05\"},{\"text\":\"SQL 语句-DQL 语句\",\"link\":\"/web/NodeLearn/04/learn06\"},{\"text\":\"MySQL 数据库-高级特性\",\"link\":\"/web/NodeLearn/04/learn07\"},{\"text\":\"MySQL 查询对象\",\"link\":\"/web/NodeLearn/04/learn08\"},{\"text\":\"MySQL 查询数组\",\"link\":\"/web/NodeLearn/04/learn09\"}]},{\"text\":\"Node 中操作 MySQL\",\"collapsed\":true,\"items\":[{\"text\":\"mysql2 库介绍使用\",\"link\":\"/web/NodeLearn/05/learn01\"},{\"text\":\"mysql2 预处理语句\",\"link\":\"/web/NodeLearn/05/learn02\"},{\"text\":\"mysql2 连接池使用\",\"link\":\"/web/NodeLearn/05/learn03\"},{\"text\":\"mysql2 的 Promise\",\"link\":\"/web/NodeLearn/05/learn04\"}]},{\"text\":\"Node 项目实践\",\"collapsed\":true,\"items\":[{\"text\":\"项目搭建\",\"link\":\"/web/NodeLearn/06/learn01\"},{\"text\":\"JWT实现Token机制\",\"link\":\"/web/NodeLearn/06/learn02\"},{\"text\":\"图片上传和存储\",\"link\":\"/web/NodeLearn/06/learn03\"},{\"text\":\"配置云服务器\",\"link\":\"/web/NodeLearn/06/learn04\"}]},{\"text\":\"Node 项目中遇到的问题\",\"collapsed\":true,\"items\":[{\"text\":\"Nodejs——Mysql时区问题\",\"link\":\"/web/NodeLearn/07/learn01\"},{\"text\":\"apifox 设置 token\",\"link\":\"/web/NodeLearn/07/learn02\"},{\"text\":\"Node 内存不足\",\"link\":\"/web/NodeLearn/07/learn03\"}]}]}],\"/dailyNotes/\":[{\"text\":\"日常笔记\",\"items\":[{\"text\":\"JavaScript 相关\",\"collapsed\":true,\"items\":[{\"text\":\"10+个 JavaScript 单行代码\",\"link\":\"/dailyNotes/01/learn01\"},{\"text\":\"Array 下有多少原型方法\",\"link\":\"/dailyNotes/01/learn02\"},{\"text\":\"正则相关\",\"link\":\"/dailyNotes/01/learn03\"}]},{\"text\":\"Vue 相关\",\"collapsed\":true,\"items\":[{\"text\":\"使用 defer 优化白屏时间\",\"link\":\"/dailyNotes/02/learn01\"}]}]}],\"/dailyNotes/03/\":[{\"text\":\"css 相关\",\"items\":[{\"text\":\"loading\",\"collapsed\":true,\"items\":[{\"text\":\"纯css实现Loading效果（上）\",\"link\":\"/dailyNotes/03/learn01\"},{\"text\":\"纯css实现Loading效果（中）\",\"link\":\"/dailyNotes/03/learn02\"},{\"text\":\"纯css实现Loading效果（下）\",\"link\":\"/dailyNotes/03/learn03\"}]}]}],\"/workflow/\":[{\"text\":\"常用工具/方法\",\"collapsed\":false,\"items\":[{\"text\":\"工具库整理\",\"link\":\"/workflow/utils/library\"},{\"text\":\"常用正则整理\",\"link\":\"/workflow/utils/regexp\"},{\"text\":\"常用方法整理\",\"link\":\"/workflow/utils/function\"}]},{\"text\":\"CSS 相关\",\"collapsed\":false,\"items\":[{\"text\":\"CSS 语法\",\"link\":\"/workflow/css/spec\"},{\"text\":\"CSS 奇淫技巧\",\"link\":\"/workflow/css/tricks\"},{\"text\":\"Sass 常用技巧\",\"link\":\"/workflow/sass/\"},{\"text\":\"快速实现SVG动态图标\",\"link\":\"/workflow/css/svg\"}]},{\"text\":\"ElementUI 相关\",\"link\":\"/workflow/elementUI/learn01\"},{\"text\":\"Vue 相关\",\"link\":\"/workflow/vue/\"},{\"text\":\"Vite 相关\",\"items\":[{\"text\":\"Vite 配置-1\",\"link\":\"/workflow/vite/learn01\"},{\"text\":\"Vite 配置-2\",\"link\":\"/workflow/vite/learn02\"},{\"text\":\"src 配置\",\"link\":\"/workflow/vite/learn03\"}]},{\"text\":\"Node 相关\",\"items\":[{\"text\":\"npm 常用命令\",\"link\":\"/workflow/node/npm\"},{\"text\":\"nvm 常用命令\",\"link\":\"/workflow/node/nvm\"}]},{\"text\":\"终端相关\",\"collapsed\":false,\"items\":[{\"text\":\"Zsh 配置\",\"link\":\"/workflow/terminal/zsh\"},{\"text\":\"命令行工具\",\"link\":\"/workflow/terminal/toolkit\"},{\"text\":\"Shell 命令\",\"link\":\"/workflow/terminal/shell\"},{\"text\":\"iTerm2 mac 终端命令行工具\",\"link\":\"/workflow/terminal/learn01\"},{\"text\":\"oh-my-zsh 设置\",\"link\":\"/workflow/terminal/learn02\"}]},{\"text\":\"git\",\"collapsed\":false,\"items\":[{\"text\":\"Git 相关技巧\",\"link\":\"/workflow/git/learn01\"},{\"text\":\"Git 命令清单\",\"link\":\"/workflow/git/learn02\"}]}],\"/efficiency/\":[{\"text\":\"软件推荐与配置\",\"items\":[{\"text\":\"多平台软件\",\"link\":\"/efficiency/software/cross-platform\"},{\"text\":\"Mac 平台\",\"link\":\"/efficiency/software/mac\"},{\"text\":\"Windows 平台\",\"link\":\"/efficiency/software/windows\"},{\"text\":\"浏览器设置与扩展\",\"link\":\"/efficiency/software/browser\"},{\"text\":\"Visual Studio Code 配置\",\"link\":\"/efficiency/software/vscode\"},{\"text\":\"WebStorm 配置\",\"link\":\"/efficiency/software/webstorm\"}]},{\"text\":\"在线工具\",\"link\":\"/efficiency/online-tools\"},{\"text\":\"书签脚本\",\"link\":\"/efficiency/bookmark-scripts\"}],\"/pit/\":[{\"text\":\"踩坑记录\",\"items\":[{\"text\":\"npm 踩坑记录\",\"link\":\"/pit/npm\"},{\"text\":\"PC 踩坑记录\",\"link\":\"/pit/pc\"},{\"text\":\"H5 踩坑记录\",\"link\":\"/pit/h5\"},{\"text\":\"element-plus el-table 报错\",\"link\":\"/pit/element_plus\"}]}],\"/web/Dockers/\":[{\"text\":\"Docker\",\"items\":[{\"text\":\"Minio 对象存储\",\"collapsed\":true,\"items\":[{\"text\":\"Docker 相关\",\"link\":\"/web/Dockers/01/learn01\"}]},{\"text\":\"Minio 对象存储\",\"collapsed\":true,\"items\":[{\"text\":\"安装 Minio\",\"link\":\"/web/Dockers/02/learn01\"}]}]}]},\"outline\":{\"level\":\"deep\",\"label\":\"本页目录\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://gitee.com/addminsjh\"}],\"footer\":{\"message\":\"如有转载或 CV 的请标注本站原文地址\",\"copyright\":\"Copyright © 2023-present 烟浮YanFu\"},\"darkModeSwitchLabel\":\"外观\",\"returnToTopLabel\":\"返回顶部\",\"lastUpdatedText\":\"上次更新\",\"search\":{\"provider\":\"local\",\"options\":{\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"noResultsText\":\"无法找到相关结果\",\"resetButtonTitle\":\"清除查询条件\",\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\",\"navigateUpKeyAriaLabel\":\"111\",\"closeText\":\"关闭\"}}}}},\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}")</script>
    
  </body>
</html>